CSS : Selector input[type=”]

Selector input[type=''], fungsi dari selector ini ialah manambahkan style ke html input sesuai dengan typenya, jadi

The first principle is that you must not fool yourself, and you're the easiest person to fool. Richard Feynman

Selector input[type=''], fungsi dari selector ini ialah manambahkan style ke html input sesuai dengan typenya, jadi

Last Modif at July 8th, 2011

CSS lagi, tulisan kali ini kita akan share tentang CSS : Selector input[type=”], fungsi dari selector ini ialah manambahkan style ke html input sesuai dengan typenya, contoh :

input[type='submit']{property: value;
}
ini untuk
<input type="submit"/>

input[type='reset']{property: value;
}
ini untuk
<input type="reset"/>

input[type='text']{property: value;
}
ini untuk
<input type="text"/>

input[type='password']{property: value;
}
ini untuk
<input type="password"/>

Biasanya jika kita ingin merubah tampilan tag input, kita menyertakan selector class atau id kedalam input-nya misal

<input class='nama_class' type'text'/>
<-- -->
/* trus CSS-nya:**/
.nama_class{
property: value;
}

Nah dengan input[type=' '] ini, kita ngga perlu ber-ribet-ribet lagi nambain class atau id kedalam tag inputnya, jadi kita hanya nambain css seperti ini

/* misal*/ input[type=_sesuaikan_type_input_yang_ingin_ditambahkan_style']{
property:
value;
}

contoh input[type=”] dengan css

<div class='input-style'>
<form>
<input value='text'type='text'/>
<input type='reset'/>
<input value='submit' type='submit'/>
</form>
</div>

Jadinya





code css input[type=”]-nya

.input-style{
margin-top:20px;
}
.input-style input[type='text'],
.input-style input[type='reset'],
.input-style input[type='submit']{
margin-top:5px;
background:none;
border:none;
border-radius:4px;
}
.input-style input[type='text']{
background:#fff;
color:#aaa;
padding:10px 4px;
border:1px solid #ccc;
min-width:250px;
}
.input-style input[type='text']:focus{
background:#eee;
color:#414141;
border-color:#999;
}
.input-style input[type='reset'],
.input-style input[type='submit']{
color:#515151;
text-transform:uppercase;
font:bold 14px arial;
min-width:100px;
text-align:center;
padding:10px 4px;
background:#ddd;
background:-moz-linear-gradient(top, silver 0%, white 50%, silver 100% );
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,silver), color-stop(50%, blue), color-stop(100%,silver) )
}
.input-style input[type='reset']:hover,
.input-style input[type='submit']:hover{
background:#ccc;
cursor:pointer;
background:-moz-linear-gradient(left, silver 0%, white 50%, silver 100% );
background:-webkit-gradient(linear, left bottom, right bottom, color-stop(0%,silver), color-stop(50%, blue), color-stop(100%,silver) )
}

code css dan html input[type=”]

copy markup berikut lalu save as denga format *html, silakan diedit untuk belajar

<html>
<head>
<title>CSS : input[type='']</title>
<meta content="indam url:http://www.indaam.net" name="author"/>
<meta http-equiv="refresh" content="320;url=http://www.indaam.net"/>
<style type="text/css">
/*
CREATED BY :
name : Indam
website : http://www.indaam.net
facebook : http://facebook.com/indaam
twitter : http://twitter.com/indaam
email : indaam[at]gmail.com
*/
body{
width:80%;
margin:30px auto;
}
.input-style{
margin-top:20px;
}
.input-style input[type='text'],
.input-style input[type='reset'],
.input-style input[type='submit']{
margin-top:5px;
background:none;
border:none;
border-radius:4px;
}
.input-style input[type='text']{
background:#fff;
color:#aaa;
padding:10px 4px;
border:1px solid #ccc;
min-width:250px;
}
.input-style input[type='text']:focus{
background:#eee;
color:#414141;
border-color:#999;
}
.input-style input[type='reset'],
.input-style input[type='submit']{
color:#515151;
text-transform:uppercase;
font:bold 14px arial;
min-width:100px;
text-align:center;
padding:10px 4px;
background:#ddd;
background:-moz-linear-gradient(top, silver 0%, white 50%, silver 100% );
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,silver), color-stop(50%, blue), color-stop(100%,silver) )
}
.input-style input[type='reset']:hover,
.input-style input[type='submit']:hover{
background:#ccc;
cursor:pointer;
background:-moz-linear-gradient(left, silver 0%, white 50%, silver 100% );
background:-webkit-gradient(linear, left bottom, right bottom, color-stop(0%,silver), color-stop(50%, blue), color-stop(100%,silver) )
}
</style>
</head>
<body>
<div class='input-standar'>
<form>
<input value='text'type='text'/>
<input type='reset'/>
<input value='submit' type='submit'/>
</form>
</div>
<div class='input-style'>
<form>
<input value='text'type='text'/>
<input type='reset'/>
<input value='submit' type='submit'/>
</form>
</div>
<span style='position:fixed;bottom:3%;right:3%;display:block:margin:0;font:italic bold 120% "comic sans ms";'>Original Source Code by <a style='text-decoration:none;color:red;' href='http://www.indaam.net' target='blank' title='Indam Site'>Indam Site</a></span>
<!-- regards
http://www.indaam.net -->
</body>
</html>

semoga bermanfaat

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-