Mengatur Lebar 100% Pada Tag Input

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.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments