Select option css

Select option css > option css arrow

Not need loading image arrow, web page loading performance;

select option css
Style Arrow Select option css

 

Embed html with code:

<div class=”plain-select”>
<select>
<option value=””>Code</option>
<option value=”a”>A</option>
<option value=”b”>B</option>
</select>
</div>

and css style:

select option css

<style>

.plain-select{float: left;text-align: center;position: absolute;display: block;}
.plain-select:after {
content: “”;
position: absolute;
z-index: 2;
right: 8px;
top: 50%;
margin-top: -3px;
height: 0;
width: 0;
border-top: 6px solid #f99300;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
pointer-events: none;
}
select{-webkit-appearance: none;width: 100px}

</style>

Demo Select option css: (click tab result)

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *