Mengatur Lebar 100% Pada Tag Input

Kali ini aku akan share sebuah pengetahuan dasar dan sederhana perihal CSS namun kadang kurang banyak diketahui sehingga kita kesulitan untuk mengaturnya.

Adalah perihal pengaturan lebar 100% pada tag input, baik untuk input search, email, dan lainnya. Jika kita tidak mengetahui pengaturan dasarnya perihal lebar 100% pada tag  input ini, kita akan kesulitan mengatur lebarnya dengan lebar 100% alasannya biasanya input akan keluar melebihi induknya ibarat pada gambar di atas untuk kotak search box pertama.

Itu dikarenakan pada input tersebut memakai padding dan border sehingga menambah lebar kotak input tersebut. Nah semoga lebar input tersebut mempunyai lebar 100% terhadap induknya walaupun mempunyai border dan padding ibarat kotak kedua pada gambar di atas, kita akan memakai css box-sizing pada inputnya.

Contoh input search yang tidak menggunakan box-sizing ibarat di bawah ini dengan css style dan html ibarat di bawah ini.

CSS

 .search-box{
     display:block;
     border:1px solid #ddd;
     padding:20px;
 }
 .search-box input{
     width:100%;
     padding: 8px 12px;
     border:5px solid #ddd;
 }
 .search-box input:focus{
     border:5px solid #e8554e;
     outline:none
 }

HTML

 <form class="search-box">
     <input type="text" name="s" placeholder="Search here..."/>
     </form>

Hasilnya

Untuk memperbaiki tampilan kotak search di atas, kita tiggal menambahkan css di bawah ini pada inputnya

     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;

Sehingga CSS-nya menjadi ibarat di bawah ini

 .search-box input{
     width:100%;
     padding: 8px 12px;
     border:5px solid #ddd;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
 }

Dan risikonya akan ibarat di bawah ini.

Nah gampang bukan? Semoga postingan ringan dan singkat ini mempunyai kegunaan bagi Anda sehingga akan memudahkan Anda untuk mempercantik tampilan blog Anda.
Sumber https://www.kompiajaib.com/

Share this post