Membuat combo box warna warni

No Comment - Post a comment

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.

 
This Post has No Comment Add your own!

Posting Komentar