web-dev-qa-db-fra.com

Entrée CSS avec largeur: 100% va au-delà des limites du parent

J'essaie de créer un formulaire de connexion constitué de deux champs d'entrée avec un remplissage d'insertion, mais ces deux champs finissent toujours par dépasser les limites de leur parent; le problème découle du remplissage ajouté . Que pourrait-on faire pour remédier à ce problème?

Extrait JSFiddle: http://jsfiddle.net/4x2KP/

NB: Le code n'est peut-être pas le plus propre. Par exemple, l'élément span qui encapsule les entrées de texte peut ne pas être nécessaire du tout.

    #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>
cssformsinputwidth
144
peelz

Si tous les éléments ci-dessus échouent, essayez de définir les propriétés suivantes pour votre entrée, afin que celle-ci prenne le maximum d’espace mais ne déborde pas:

input {
    min-width: 100%;
    max-width: 100%;
}
13
Deiu

Les autres réponses semblent vous indiquer de coder en dur la largeur ou d’utiliser un hack spécifique au navigateur. Je pense qu'il y a un moyen plus simple.

En calculant la largeur et en soustrayant le remplissage (ce qui provoque le chevauchement des champs). Le 20px vient de 10px pour un rembourrage à gauche et 10px pour un rembourrage à droite.

input[type=text],
input[type=password] {
    ...
    width: calc(100% - 20px);
}
9
Al Zziwa

Le rembourrage est ajouté à la largeur totale. Comme votre conteneur a une largeur en pixels, il est préférable d'attribuer une largeur en pixels aux entrées, mais n'oubliez pas de supprimer le remplissage et la bordure de la largeur que vous avez définie pour éviter le même problème.

2
ralph.m

Essayez de changer le box-sizing en border-box. La padding ajoute à width de vos éléments input.

Voir la démo ici

CSS

input[type=text],
input[type=password] {
    width: 100%;
    margin-top: 5px;
    height: 25px;
    ...
}

input {
    box-sizing: border-box;
}

+ box-sizing

2
Sourabh

J'ai essayé ces solutions mais je n'ai jamais obtenu de résultat probant. En fin de compte, j'ai utilisé un balisage sémantique approprié avec un ensemble de champs. Cela évitait de devoir ajouter des calculs de largeur et des dimensions de boîte.

Il vous permet également de définir la largeur du formulaire selon vos besoins et les entrées restent dans le remplissage 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'assoient l'un avec l'autre.

<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>
1
Jason Merry

Le rembourrage est essentiellement ajouté à la largeur. Par conséquent, lorsque vous dites width:100% et padding: 5px 10px, vous ajoutez en fait 20 pixels à la largeur de 100%.

0
n00dle

Voulez-vous que les champs de saisie soient centrés? Une astuce pour centrer les éléments: spécifiez la largeur de l'élément et définissez la marge sur auto, par exemple:

margin : 0px auto;
width:300px

Un lien vers votre violon mis à jour:

http://jsfiddle.net/4x2KP/5/

0
monika

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

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

enlever le point-virgule avant. Cependant,! Important devrait être utilisé rarement et peut en grande partie être évité.

0
Andy G