It's Drop Down but It's Select Box too Use CSS

Tiba-tiba saja kepingin membahas tema dropdown Fitur drop down beragam macam. Bila sudah dirangkai dengan ini-itunya maka inti dari feature ini adalah menampilkan isi konten dengan jatuh ke bawah! Drop = jatuh, dan Down = Ke bawah :D
Kesempatan sekarang Koben akan bahas drop-down khusus yg jenis Drop-down_list Benar sekali sob, dropDOWN HTML <select> Tag
Bentuk default dari sebuah Select Box!

DefaultBeben KobenBloglangGanteng Kalem

Dengan bentuk default begitu, kita bisa mengkreasikannya dengan menambahkan variabel background, color, or etc. Like this

Use Background ColorBeben KobenBloglangGanteng Kalem

Lantas bagaimana jadinya jika kita kreasikan select-box dengan variasi gambar (image)?

Use ImageBeben KobenBloglangGanteng Kalem

Berikut ini kode css dari ke tiga demo diatas

    .select_dropdown {
        height: 28px;
        line-height: 28px;
        border: 1px solid #aaa;
        padding: 4px
    }
    .styled_dropdown {
        width: 230px;
        height: 34px;
        overflow: hidden;
        background:url(http://YOUR-IMAGE-33px x 33px) no-repeat right #fff;
    }
    .styled_dropdown select {
        background: transparent;
        width: 263px;
        padding: 5px;
        border: 1px solid #ccc;
        font-size: 16px;
        height: 34px;
    }

Markup HTML

<select class="select_dropdown">
<option>Default</option> 
<option></option>
. . .
</select>

<select class="select_dropdown" style="color:#fff;background:#444">
<option>Use Background Color</option> 
<option></option>
. . .
</select>

<div class="styled_dropdown">
<select>
<option>Use Image</option> 
<option></option>
. . .
</select>
</div>

Resource: bavotasan.com/2011/style-select-box-using-only-css/
Apakah hanya sampai disini saja kreasi dropdown selectbox? Diatas barusan baru pakai CSS v.2 sekarang yuk kita berkreasi dengan memakai atribut CSS v.3

Select…Option #1Option #2Option #3

   

Select…Option #1Option #2Option #3

You can read here Dark and Light Dropdown Lists and here Mini Dropdown Menu
Apakah masih ada lagi? Oh tentu dong...cek gi dot

DropDown 1	DropDown 2
Title 1 What here 1.1 What here 1.2 What here 1.3	Title 2 What here 2.1 What here 2.2 What here 2.3

Resource by: codepen.io/edy-b/pen/fnhBu
Begitu kira-kira trik seputaran membuat drop-down select-box pure using CSS. Kalau mau keren ya sikat saja yang ini Custom Drop-Down List Styling
NEW and SIMPLE similar no.3

New but SimpleHere is the first optionThe second optionThe third option

.styled-select {
margin: 10px auto;
border: 1px solid #ccc;
width: 200px;
position: relative;
cursor: pointer;
overflow: hidden;
}
.styled-select:after {
content: "\25BC";
position: absolute;
top: 7px;
right: 7px;
font-family: arial;
font-weight: bold;
color: #666;
pointer-events: none;
}
.styled-select select {
text-indent: 3px;
cursor: pointer;
background: transparent;
width: 215px;
font-size: 16px;
border: 1px solid #fff;
color: #666;
font-size: 15px;
padding: 5px 0;
}
.styled-select:hover:after {
color: red;
}

<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
<option>The third option</option>
</select>
</div>http://codepen.io/onediv/full/ngude
Happy drop down \m/