Efek Highlight Pada Input Form dengan CSS
Hampir setiap website memiliki element form di dalamnya. Baik itu berupa form login, sign up, order, dan masih banyak lagi contoh pemakaian form pada HTML. Dalam artikel ini kita akan membuat efek highlight pada input form, untuk memperkaya tampilan form itu sendiri. Kabar baiknya, kita tidak perlu menggunakan JavaScript yang rumit. Dengan memakai satu pseudo class pada CSS saja kita bisa mendapatkan efek highlight pada input form.
Sebelumnya kita buat terlebih dahulu form pada HTML:
<form>
<fieldset>
<input class="highlight" name="username" type="text" />
<input class="highlight" name="password" type="password" />
<input type="submit" value="Login" />
</fieldset>
</form>
Nah, di bagian ini kita akan memakai pseudo class :focus yang berarti style highlight ini akan berlaku pada saat cursor kita berada di dalam elemen input form kita:
form input[type=text]:focus, form input[type=password]:focus {
border: solid 1px #D9AD00;
background: #FFF7D7;
}
Namun karena IE6 tidak mendukung attribute selector semacam [type=text], akan lebih efektif jika kita menggunakan class pada elemen tersebut:
form input.highlight {
border: solid 1px #D9AD00;
background: #FFF7D7;
}
Kode selengkapnya seperti ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Highlight Input</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
form fieldset{
border: none;
}
form input.highlight{
background: #f9f9f9;
border: solid 1px #CCCCCC;
padding: 5px;
}
form input.highlight:focus {
border: solid 1px #D9AD00;
background: #FFF7D7;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<input type="text" name="username" class="highlight" />
<input type="password" name="password" class="highlight" />
<input type="submit" value="Login" />
</fieldset>
</form>
</body>
</html>
Web designer dan front-end developer muda yang belum terlalu jelas dari spesies mana dia berasal. Pada sebuah eksperimen, dia mampu bertahan di dalam air selama 323,007645 detik, dan bisa melayang di udara dengan ketinggian mencapai 15,23 meter. Karena sering berpindah habitat, kini ia memutuskan untuk berada di darat dan menekuni dunia Web Design, HTML5, CSS, dan jQuery.
yap. encoding declaration bisa pake HTTP Header, tag meta, maupun xml declaration. Tergantung perlakuan pada dokumennya seperti apa. Kalau XHTML itu murni diberlakukan sebagai XML, nggak boleh pake tag meta.
dan memang seharusnya kita memakai eksternal style. tapi karena cuma contoh sederhana sih gpp kan :p
focus atau hover itu tergantung kebutuhan juga sih kang dani,,, hehe.
Doctype xhtml 1.1 make xml encoding declaration kan di atasnya?
Gemana kalo tag
<br>yang lebih dari 1 itu diatur via CSS aja, kalo memang make XHTML 1.1?Selain saat focus, apa tidak sekalian saat hover juga?
[...] Efek Highlight Pada Input Form dengan CSS [...]
ak masih pemula nih ,
terus script ini diletakkan dimana ?
@indirakayam script yang mana mas? efek ini bisa diterapkan di setiup input form
mantap infonya… keknya bakal gw terapin di website saya deh
thanks banget yah infonya
[...] http://rumahdot.com/web-programming/efek-highlight-pada-input-form-dengan-css/ Posted in Css, Programming – Tagged css, form SHARE THIS Twitter Facebook Delicious [...]
menarik sekali.
bisa lihat demo nya mas ?
Yap, sudah diupdate dengan link demonya.