Minggu, 30 Oktober 2011

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" /><br /><br />
            <input type="password" name="password" class="highlight" /><br /><br />
            <input type="submit" value="Login" />
        </fieldset>
    </form>
</body>
</html>
Diposting oleh Arf Nr'hman di 19.17

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)
 
;