Mengatur Lebar 100% Pada Tag Input

Mengatur Lebar 100% Pada Tag Input

Bola Hero Gawai

Mengatur Lebar 100% Pada Tag Input

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×