Индивидуальные меню выбора HTML

Question

Не желая прибегать к jQuery, я бы очень хотел поместить выпадающую кнопку в раскрывающееся меню.

У меня есть значок вниз, который работает, нажимая (скрывая) переполнение выделения, а затем заменяя его на div фоновым изображением. Это немного взломанный, но стандартный.

HTML (Minimal)

<div class="styled-select"> 
    <select> 
    <option>Mike</option> 
    <option>Jonathan Frank Long</option> ... etc 
    </select> 
</div> 

CSS (упрощенный)

.styled-select{ 
    overflow: hidden; 
    background:url(input-box-fade.png) no-repeat right transparent; 
    background-position: 100%; 
    background-size:200px; 
    width:300px; 
} 

Мой дизайнер дал мне икону с размытым фоном градиент слишком, однако, когда есть длинный item (например, вариант с длинным выбором), тогда я нашел значок, который сидит BENEATH в тексте.

Есть ли все-таки я могу привести это вперед, чтобы действительно наложить выбор?

См. codepen example. Благодаря

Answer 1

Попробуйте:

<label>Please select a long menu item</label> 
<div class=" new"> 
    <select name="series" id="series" tabindex="2" class="form-control " onChange="SetSeriesNumber()"> 
    <option value="" class="select-placeholder" disabled="disabled" selected="selected">Select Sermon Series</option> 
    <option value="252">Brand New Series</option> 
    <option value="119">Certain | Secure | Illuminated: Studies in 1 John</option> 
    <option value="251" selected="selected">God Theory LIVE</option> 
    <option value="115">One Off Sermons</option> 
    <option value="249">This is a cool series</option> 
    <option value="250">This is a test series!</option> 
    <option value="37">Christmas Hits</option> 
    <option value="40">Ephesians: Church, the Manifold Wisdom of God Part 1</option> 
    <option value="39">Exodus: The Great Escape Part 1</option> 
    <option value="38">Faith Works</option> 
    <option value="53">Joseph and The Gospel of Many Colours</option> 
    <option value="253">Series Topic</option> 
    <option value="125">The Bible - Believing, Feeling, Doing</option> 
    <option value="127">The Kingdom of God is Like...</option> 
</select> 
</div> 

CSS:

.new{ 
    background: url(https://test.sermonmanager.net/assets/images/icons/input-box-fade.png) no-repeat right transparent; 
background-position: 100%; 
background-size:200px; 
background-color:#ddd; 
padding: 0; 
margin: 0 0 10px; 
border: 1px solid #ddd; 
width: 300px; 
border-radius: 3px; 
overflow: hidden; 
border-radius: 3px; 
} 
select { 
padding: 5px 38px 5px 8px; 
width: 103%; 
border: none; 
box-shadow: none; 
background-color: transparent; 
background-image: none; 
-webkit-appearance: none; 
    -moz-appearance: none; 
     appearance: none; 
}