Jquery 自定义HTML选择菜单

不想求助于jQuery，我真的很想在我的select下拉列表中放置一个下拉按钮

我有一个向下的图标，它通过按下（隐藏）select的溢出，然后用背景图像替换为div。这是一个有点黑客，但标准

HTML（最小值）

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

不管怎样，我是否可以把这件事提出来，以真正覆盖整个世界 选择

看。谢谢

试试这个：

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

---

嗯，这到底是怎么回事？我完全复制并粘贴了，您添加的只是一个Javascript函数，没有代码？这里不需要Javascript，您可以在没有JSF的情况下进行检查，但仍然无法工作？图像仍然在内容的下面，我可以看到它工作得很完美。请查看下面的JSFIDLE链接。所以你可以得到更好的主意。这就是你需要的吗？没有穆克什。不想成为一个痛苦的人。这个解决方案是不对的。我希望图标覆盖选择框。因此，文本将位于图标下方。我是否需要使用

z-index

？很难说，您在代码笔中使用的是外部缩小样式表。当我移除它们并将填充更改为

填充：5px 65px 5px 8px选择

css选择器上，code>似乎我得到了你想要的行为：嘿，谢谢你的这个小插曲，是的，很抱歉。不过，我希望将透明图标覆盖在文本顶部而不是下方。但是，填充很有用，但仍然会将文本放在顶部。是的，我过度阅读了可视覆盖需要。问题是，如果某个内容是

over

select，那么它将不再是可单击/可选择的（而且，没有一种方便的方法可以使用javascript启动一个在所有浏览器中都能工作的open select事件。您可能希望搜索html输入（在您的情况下选择）替代项，这些替代项可能更容易设置样式。或者使用悬停列表（如在菜单中）设置ul-li的样式。

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

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

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