web-dev-qa-db-ja.com

幅のあるCSS入力：100％が親の範囲外になります

埋め込みパディングのある2つの入力フィールドで構成されるログインフォームを作成しようとしていますが、これらの2つのフィールドは常に親の境界を超えてしまいます。この問題は、追加されたinsetパディングに起因します。この問題を修正するために何ができますか？

JSFiddleスニペット： http://jsfiddle.net/4x2KP/

N.B .:コードが最もクリーンでない場合があります。たとえば、テキスト入力をカプセル化するspan要素はまったく必要ない場合があります。

    #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
136
peelz

上記のすべてが失敗する場合、入力に以下のプロパティを設定してみてください。最大スペースを使用し、オーバーフローしないようにします。

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

他の答えは、幅をハードコーディングするか、ブラウザ固有のハックを使用するように指示しているようです。もっと簡単な方法があると思います。

幅を計算し、パディングを減算することにより（フィールドのオーバーラップが発生します）。 20pxは、左のパディングの10pxと右のパディングの10pxから派生しています。

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

全体の幅にパディングが追加されます。コンテナにはピクセル幅があるため、入力にもピクセル幅を指定することをお勧めしますが、同じ問題を回避するために、設定した幅からパディングとボーダーを削除することを忘れないでください。

2
ralph.m

box-sizingをborder-boxに変更してみてください。 paddingは、width要素のinputに追加しています。

こちらのデモをご覧ください

CSS

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

input {
    box-sizing: border-box;
}

+ box-sizing

2
Sourabh

これらのソリューションを試しましたが、決定的な結果は得られませんでした。最終的に、フィールドセットで適切なセマンティックマークアップを使用しました。幅の計算とボックスのサイズ変更を追加する必要がなくなりました。

また、必要に応じてフォームの幅を設定でき、入力はエッジに必要なパディング内に残ります。

この例では、フォームとフィールドセットに境界線を、凡例とフィールドセットに不透明な背景を配置して、それらがどのように重なり合って座っているかを確認できるようにしました。

<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

パディングは基本的に幅に追加されるため、width:100%およびpadding: 5px 10pxと言うと、実際には100％の幅に20pxが追加されます。

0
n00dle

入力フィールドを中央に配置しますか？要素を中央に配置するコツ：要素の幅を指定し、マージンを自動に設定します。例：

margin : 0px auto;
width:300px

更新されたフィドルへのリンク：

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

0
monika

次の行に感嘆符が付いたcssにもエラーがあります。

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

その前にセミコロンを削除します。ただし、！importantはめったに使用されるべきではなく、大部分は回避できます。

0
Andy G