jquery - 自定义 HTML 选择菜单

Question

不想求助于 jQuery，我真的很想在我的选择下拉菜单中放置一个下拉按钮。

我有一个向下图标，它通过插入(隐藏)选择的溢出来工作，然后用带有背景图像的 div 替换它。这有点hack，但是标准。

HTML(最小)

<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;
}

我的设计师也给了我一个带有模糊渐变背景的图标，但是当有一个长元素(比如一个长选择选项)时，我发现图标位于文本下方。

Is there anyway I can bring this forward to truly overlay the selection?

参见 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;
}