Mengatur Lebar 100% Pada Tag Input

Ditulis oleh: Adhy Suryadi

Ditulis pada: 5/02/2015

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

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

Itu dikarenakan pada input tersebut menggunakan padding dan border sehingga menambah lebar kotak input tersebut. Nah agar lebar input tersebut memiliki lebar 100% terhadap induknya walaupun memiliki border dan padding seperti kotak kedua pada gambar di atas, kita akan menggunakan css box-sizing pada inputnya.

Contoh input search yang tidak menggunakan box-sizing seperti di bawah ini dengan css style dan html seperti 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 seperti 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 hasilnya akan seperti di bawah ini.

Nah mudah bukan? Semoga postingan ringan dan singkat ini berguna bagi Anda sehingga akan memudahkan Anda untuk mempercantik tampilan blog Anda.