L'entrée CSS avec width : 100% sort du cadre du parent

Question

J'essaie de créer un formulaire de connexion avec deux champs d'entrée avec un rembourrage inséré, mais ils finissent par dépasser les limites du parent. Quelle est la cause de ce problème ?

Un extrait de JSFiddle : http://jsfiddle.net/4x2KP/

    #mainContainer {
        line-height: 20px;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        background-color: rgba(0,50,94,0.2);
        margin: 20px auto;
        display: table;
        -moz-border-radius: 15px;
        border-style: solid;
        border-color: rgb(40, 40, 40);
        border-radius: 2px 5px 2px 5px / 5px 2px 5px 2px;
        border-radius: 2px;
        border-radius: 2px 5px / 5px;
        box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);
    }

    .loginForm {
        width: 320px;
        height: 250px;
        padding: 10px 15px 25px 15px;
        overflow: hidden;
    }

    .login-fields > .login-bottom input#login-button_normal {
        float: right;
        padding: 2px 25px;
        cursor: pointer;
        margin-left: 10px;
    }

    .login-fields > .login-bottom input#login-remember {
        float: left;
        margin-right: 3px;
    }

    .spacer {
        padding-bottom: 10px;
    }

    /* ELEMENT OF INTEREST HERE! */
    input[type=text],
    input[type=password] {
        width: 100%;
        height: 20px;
        padding: 5px 10px;
        background-color: rgb(215, 215, 215);
        line-height: 20px;
        font-size: 12px;
        color: rgb(136, 136, 136);
        border-radius: 2px 2px 2px 2px;
        border: 1px solid rgb(114, 114, 114);
        box-shadow: 0 1px 0 rgba(24, 24, 24,0.1);
    }

    input[type=text]:hover,
    input[type=password]:hover,
    label:hover ~ input[type=text],
    label:hover ~ input[type=password] {
        background:rgb(242, 242, 242) !important;
    }

    input[type=submit]:hover {
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -10px 10px rgba(255,255,255,0.1);
    }

    <div id="mainContainer">
        <div id="login" class="loginForm">
            <div class="login-top">
            </div>
            <form class="login-fields" onsubmit="alert('test'); return false;">
                <div id="login-email" class="login-field">
                    <label for="email" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">E-mail address</label>
                    <span><input name="email" id="email" type="text"></input></span>
                </div>
                <div class="spacer"></div>
                <div id="login-password" class="login-field">
                    <label for="password" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Password</label>
                    <span><input name="password" id="password" type="password"></input></span>
                </div>
                <div class="login-bottom">
                    <input type="checkbox" name="remember" id="login-remember"></input>
                    <label for="login-remember" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Remember my email</label>
                    <input type="submit" name="login-button" id="login-button_normal" style="cursor: pointer" value="Log in"></input>
                </div>
            </form>
        </div>
    </div>

Answer 1

Essayez de coder ceci

*, ::after, ::before {
  box-sizing: border-box;
}

Answer 2

Vous avez également une erreur dans votre css avec le point d'exclamation dans cette ligne :

background:rgb(242, 242, 242);!important;

supprimez le point-virgule qui le précède. Cependant, !important doit être utilisé rarement et peut être largement évité.

Answer 3

J'ai essayé ces solutions mais je n'ai jamais obtenu de résultat concluant. Finalement, j'ai utilisé un balisage sémantique approprié avec un fieldset. Cela m'a évité de devoir ajouter des calculs de largeur et de taille de boîte.

Il vous permet également de définir la largeur du formulaire comme vous l'entendez et les entrées restent dans les limites du rembourrage dont vous avez besoin pour vos bords.

Dans cet exemple, j'ai placé une bordure sur le formulaire et le jeu de champs et un arrière-plan opaque sur la légende et le jeu de champs afin que vous puissiez voir comment ils se chevauchent et s'imbriquent les uns dans les autres.

<html>
  <head>
  <style>
    form {
      width: 300px;
      margin: 0 auto;
      border: 1px solid;
    }
    fieldset {
      border: 0;
      margin: 0;
      padding: 0 20px 10px;
      border: 1px solid blue;
      background: rgba(0,0,0,.2);
    }
    legend {
      background: rgba(0,0,0,.2);
      width: 100%;
      margin: 0 -20px;
      padding: 2px 20px;
      color: $col1;
      border: 0;
    }
    input[type="email"],
    input[type="password"],
    button {
      width: 100%;
      margin: 0 0 10px;
      padding: 0 10px;
    }
    input[type="email"],
    input[type="password"] {
      line-height: 22px;
      font-size: 16px;
    }
    button {
    line-height: 26px;
    font-size: 20px;
    }
  </style>
  </head>
  <body>
  <form>
      <fieldset>
          <legend>Log in</legend>
          <p>You may need some content here, a message?</p>
          <input type="email" id="email" name="email" placeholder="Email" value=""/>
          <input type="password" id="password" name="password" placeholder="password" value=""/>
          <button type="submit">Login</button>
      </fieldset>
  </form>
  </body>
</html>

Answer 4

C'est délicat, et situationnel. Il y a un peu de confusion dans ces commentaires, résumons les solutions :

1. La première approche valable est expliquée par showdev dans la réponse acceptée. MAIS, ce n'est pas définitif.

En fait, si vous ajoutez un peu de remplissage à l'entrée, cela fonctionne maintenant. Si vous ajoutez une marge, il y a toujours un débordement. Il semble que la taille de la boîte soit ignorée. Il est également inutile de jouer avec les valeurs min-width et max-width.

2. Pour appliquer une marge, la seule solution qui fonctionne est expliquée par Al Zziwa, en utilisant calc() pour réduire la largeur par la quantité de marge. Par exemple, en ajoutant une marge à gauche et à droite :

    input {
        margin: 0 20px;
        width: calc(100% - 40px);
    }

Si vous n'aimez pas cette solution, la solution de contournement consiste à éviter la marge dans l'entrée, en utilisant plutôt un wrapper où vous appliquez un padding ou une marge.

Answer 5

Le remplissage est essentiellement ajouté à la largeur, donc lorsque vous dites width:100% y padding: 5px 10px vous ajoutez en fait 20px à la largeur de 100%.