Input CSS dengan lebar: 100% melampaui batas orangtua

172

Saya mencoba membuat formulir masuk yang terdiri dari dua bidang input dengan bantalan sisipan, tetapi kedua bidang itu selalu berakhir melebihi batas induknya; masalah berasal dari padding inset yang ditambahkan . Apa yang bisa dilakukan untuk memperbaiki masalah ini?

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

NB: Kode mungkin tidak terbersih. Misalnya, elemen rentang yang merangkum input teks mungkin tidak diperlukan sama sekali.

    #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>
Luaskan cuplikan

css  forms  input  width 
— peelz
sumber

Jawaban:

310

Gunakan definisi CSS box-sizing:border-boxuntuk mencegah bantalan dari mempengaruhi lebar atau tinggi suatu elemen. Lihat box-sizing.

border-box : Properti lebar dan tinggi termasuk padding dan border, tetapi bukan margin ... Perhatikan bahwa padding dan border akan berada di dalam kotak.

input[type=text],
input[type=password] {
    box-sizing : border-box;
}

Harap perhatikan kompatibilitas browser daribox-sizing (IE8 +).
Pada saat pengeditan ini, tidak ada awalan yang diperlukan; lihat shouldiprefix.com .

Ini sebuah demonstrasi:

#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;
}
input[type=text],
input[type=password] {
  width: 100%;
  height: 30px;
  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);
  box-sizing: border-box;
}
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);
}
.login-top {
  height: auto;/*85px;*/
}
.login-bottom {
  padding: 35px 15px 0 0;
}
<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" /></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" /></span>
      </div>
      <div class="login-bottom">
        <input type="checkbox" name="remember" id="login-remember" />
        <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" />
      </div>
    </form>
  </div>
</div>
Luaskan cuplikan

Atau, alih-alih menambahkan padding ke <input>elemen itu sendiri, gaya <span>elemen yang membungkus input. Dengan begitu, <input>elemen dapat diatur width:100%tanpa dipengaruhi oleh bantalan tambahan. Contoh di bawah ini:

Tampilkan cuplikan kode

— showdev
sumber
1
Ini sepertinya melakukan pekerjaan. Terima kasih banyak, Anda telah menyelamatkan saya cukup banyak waktu.
— peelz
2
Untuk memperluas pada bagian pertama Anda:box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;
— Bradmage
Anda membuat teman saya sehari ... css kecil tapi sangat penting :)
— Gourav Makhija
18

Jika semua di atas gagal, coba atur properti berikut untuk input Anda, untuk membuatnya mengambil ruang maksimal tetapi tidak meluap:

input {
    min-width: 100%;
    max-width: 100%;
}
— Deiu
sumber
1
inilah yang bekerja untuk saya solusi yang sangat sederhana, terima kasih
— AlexGH
13

Jawaban lain tampaknya memberi tahu Anda untuk membuat hard-code lebar atau menggunakan hack khusus browser. Saya pikir ada cara yang lebih sederhana.

Dengan menghitung lebar dan mengurangi padding (yang menyebabkan bidang tumpang tindih). 20px berasal dari 10px untuk bantalan kiri dan 10px untuk bantalan kanan.

input[type=text],
input[type=password] {
    ...
    width: calc(100% - 20px);
}
— Al Zziwa
sumber
3
Saya tidak percaya saya belum pernah melihat itu sebelumnya. Dipasang pada use case saya dengan sempurna sementara jawaban lainnya tidak. terima kasih
— merampok
Bekerja untukku. min/max-width: 100%;tidak, box-sizing: border-box;tidak. Saya membayangkan menempatkan seluruh situs saya ke dalam wadah dan memberikannya padding akan berhasil, tetapi saya tidak mau harus melakukan itu hanya untuk perbaikan sederhana ini.
— SUM1
4

Coba ubah box-sizingke border-box. The paddingadalah menambah widthdari Anda inputelemen.

Lihat Demo di sini

CSS

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

input {
    box-sizing: border-box;
}

+box-sizing

— Sourabh
sumber
2

Padding ditambahkan ke lebar keseluruhan. Karena wadah Anda memiliki lebar piksel, Anda sebaiknya memberikan lebar piksel juga pada input, tetapi ingat untuk menghapus bantalan dan batas dari lebar yang Anda atur untuk menghindari masalah yang sama.

— ralph.m
sumber
1

Saya mencoba solusi ini tetapi tidak pernah mendapat hasil konklusif. Pada akhirnya saya menggunakan markup semantik yang tepat dengan fieldset. Ini menghemat harus menambahkan perhitungan lebar dan ukuran kotak.

Ini juga memungkinkan Anda untuk mengatur lebar formulir seperti yang Anda butuhkan dan input tetap dalam padding yang Anda butuhkan untuk tepi Anda.

Dalam contoh ini saya telah menempatkan batas pada formulir dan bidang dan latar belakang buram pada legenda dan bidang sehingga Anda dapat melihat bagaimana mereka tumpang tindih dan duduk satu sama lain.

<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>
— Jason Merry
sumber
0

Padding pada dasarnya ditambahkan ke lebar, karena itu ketika Anda mengatakan width:100%dan padding: 5px 10pxAnda benar-benar menambahkan 20px ke lebar 100%.

— Tidak
sumber
1
Dan bagaimana saya bisa memperbaiki masalah ini? Saya telah mencoba banyak hal selama berjam-jam: /
— peelz
Hapus 100% lebar, itu tidak perlu karena input adalah elemen inline-block.
— Andy G
0

Anda juga memiliki kesalahan dalam css Anda dengan tanda seru di baris ini:

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

hapus titik koma di depannya. Namun, penting harus jarang digunakan dan sebagian besar dapat dihindari.

— Andy G
sumber
Ah terima kasih, aku pasti melewatkannya, ditambah, tag penting! Bahkan tidak diperlukan.
— peelz
-1

Apakah Anda ingin bidang input dipusatkan? Trik untuk memusatkan elemen: tentukan lebar elemen dan setel margin ke otomatis, misalnya:

margin : 0px auto;
width:300px

Tautan ke biola Anda yang diperbarui:

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

— monika
sumber
Tidak juga, saya mencoba untuk membuat mereka ukuran-otomatis menjadi lebar ".loginForm". Contoh: jsfiddle.net/4x2KP/7
— peelz
Anda dapat mengubah lebar .loginForm dan input harus tetap di tengah
— monika
Ya ini berfungsi, tetapi saya telah menambahkan "inset" padding karena suatu alasan: Saya tidak ingin teks mulai "langsung dari awal". Lihat gambar ini: d.pr/i/xSH1 (Bandingkan input email dengan kata sandi)
— peelz
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.