◄ Min  Size Fonts: + | - | ± Color: Max ►

Snippet Code CSS input type

Seiring dikembangkannya bahasa HTML dan CSS, sejalan dengan itu terlahir ide-ide penulisan snippet kode CSS. Satu artikel post yang bisa sobat pelajari tentang useful css snippets every designer should have www.hongkiat.com/blog/css-snippets-for-designers Kesempatan sekarang AA Koben akan berbagi snippet tag input Lumayan banyak attribute and value yg dapat dirangkaikan dengan tagging <input> Tag <input> menentukan field input dimana pengguna dapat memasukkan data. Sebuah field input dapat bervariasi dalam banyak cara, tergantung pada jenis atribut.

AttributeValueDescription
typebutton, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, weekMenentukan jenis elemen <input> untuk menampilkan.

Mari fokus kepada 2 jenis tipe input, yakni input[type="text"] & input[type="submit"]
Gue menemukan form action keren punya by master Hugo Darby-Brown cdpn.io/oBDaj Bentuk kotak pencarian yang menyembunyikan tombol search, tombol akan muncul ketika focus (mengetikan kata dalam kotak pencarian)

DEMO

Keren kan!!!
.formCus {
position: relative;
height: 3em;
margin: 0 auto;
width: 25em;
overflow: hidden;
}
.formCus input {
border: none;
height: 100%;
}
.formCus input:focus {
outline: none;
}
.formCus input[type="text"] {
padding: 0 0 0 1em;
width: 100%;
color: #777;
font-size: 19px;
}
.formCus input[type="submit"] {
background: #5096f3;
position: absolute;
right: 0;
top: 0;
width: 5em;
color: #fff;
cursor: pointer;
}
.formCus .input2:focus {
padding: 0 1em;
}
.formCus .input2:focus + .input2 {
right: 0;
}
.formCus .input2[type="submit"] {
right: -5em;
transition: 0.5s;
}
.formCus .input2[type="submit"]:focus {
right: 0;
}
Markup HTML<form action="" class="formCus" method="get" target="top">
<input class="input2" type="text" name="q" placeholder="Search something..."/>
<input class="input2" type="submit" value="Search"/>
</form>
Itu baru area tombol yg menjadi fullstylish, belum lagi area input labels with clean animated b-) Label dengan efek animasi lembut yg lagi ngetrend dimana-mana. Jika kalian tertarik, silahkan pelajari codepen.io/oknoblich/pen/wFGIH The source
BONUS: cdpn.io/zcwbD - cdpn.io/dLIjt

Happy input \m/

Loading...
XSnippet Code CSS input type
Beberapa contoh kreasi snippet kode CSS input type text dan type submit. Snippet coded tag input.
Subscribe my posts Register For Free!
[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE