|
Membuat
combo box warna warni
Combo box
merupakan suatu "elemen" yang sering digunakan
pada halaman web yang memungkinkan seorang user
untuk memilih salah satu dari beberapa pilihan.
Tampilan combo box tersebut seringkali standar,
warna latar putih dengan teks hitam.
Dengan style
sheet kita dapat membuat tampilan combo box tersebut
lebih menarik. Misalnya dengan memberi warna tertentu
pada huruf atau backgroundnya. Sebagai contohnya
Anda bisa menambahkan kode di bawah ini ke dalam
tag head pada halaman web Anda.
|
select.Menu{
font-family: Verdana,sans serif;
font-size: 14pt;
font-weight: bold;
font-style: normal;
}
option.MenuSatu{
color:#FFFFFF;
background-color:#FF0000;
}
option.MenuDua{
color:#FFFF00;
background-color:#0000FF;
}
option.MenuTiga{
color:#123456;
background-color:#FEDCBA;
}
</style>
|
Pada bagian
select.Menu, Anda dapat mengatur setting
huruf yang akan digunakan pada combo box. font-family
= untuk jenis hurufnya dan font-size untuk ukuran
huruf.
Pada option.MenuSatu,
Anda dapat mengatur tampilan warna pada combo
box. Color untuk mengatur warna teks sedangkan
background-color untuk mengatur warna latar belakangnya.
Pada contoh
di atas kami hanya menampilkan tiga contoh "menu".
Jika dirasa masih kurang, Anda dapat menambahkan
sendiri. Tentunya dengan mengikuti "pola" seperti
pada contoh di atas. Lalu untuk contohnya Anda
dapat menggunakan form seperti pada contoh berikut
ini:
|
<form>
<select class="Menu" size="1">
<option class="MenuSatu">Item
Satu</option>
<option class="MenuSatu">Item
Dua</option>
<option class="MenuSatu">Item
Tiga</option>
<option class="MenuDua">Item
Empat</option>
<option class="MenuDua">Item
Lima</option>
<option class="MenuDua">Item
Enam</option>
<option class="MenuTiga">Item
Tujuah</option>
<option class="MenuTiga">Item
Delapan</option>
<option class="MenuTiga">Item
Sembilan</option>
</select>
</form>
|
Dengan kode
di atas kita dapat membuat tampilan seperti pada
contoh di
sini.
|
