How to stylize select (menu items run over each other)?

Question

I want to stylize the drop-down list using the easydropdown.js library, stylize the arrows

make sure that the drop-down list does not move the content and the items do not overlap each other. Sketched fidl

<fieldset> <select tabindex="4" class="dropdown"> <option value="" class="label" value="">Month</option> <option value="1">January</option> ... <option value="12">December</option> </select> <select tabindex="5" class="dropdown" data-settings='{"cutOff": 12}'> <option value="" class="label">Day</option> <option value="1">1</option> ... <option value="31">31</option> </select> <select tabindex="6" class="dropdown" data-settings='{"cutOff": 12}'> <option value="" class="label">Year</option> <option value="2013">2015</option> ... <option value="2010">2010</option> </select> </fieldset>

Here you write easydropdown , and in fidle - jquery mobile .
@xaja is so connected in the same easydropdown in External Resources, well, and jquery respectively - what's wrong?
@Alexander Igorevich without a tick library stylization does not work at all ..

Answer 1 · 2015-09-30T09:58:34

I hope this sandbox will help you.

HTML

 <label> <select> <option selected> Select Box </option> <option>Short Option</option> <option>This Is A Longer Option</option> </select> </label>

CSS

 body, html {background:#444; text-align:center; padding:50px 0;} /* The CSS */ select { padding:3px; margin: 0; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; background: #f8f8f8; color:#888; border:none; outline:none; display: inline-block; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; } /* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */ @media screen and (-webkit-min-device-pixel-ratio:0) { select {padding-right:18px} } label {position:relative} label:after { content:'<>'; font:11px "Consolas", monospace; color:#aaa; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); right:8px; top:2px; padding:0 0 2px; border-bottom:1px solid #ddd; position:absolute; pointer-events:none; } label:before { content:''; right:6px; top:0px; width:20px; height:20px; background:#f8f8f8; position:absolute; pointer-events:none; display:block; }

 <label> <select> <option selected> Select Box </option> <option>Short Option</option> <option>This Is A Longer Option</option> </select> </label>

Secondly, in IE11 something is not right - a piece of the arrow is visible.

How to stylize select (menu items run over each other)?

1 answer 1

More articles: