Question

不想诉诸jQuery，我真的想在我的选择下拉列表中放置一个下拉按钮。

我有一个向下图标，通过推动（隐藏）选择的溢出，然后用带背景图像的div替换它。这有点像黑客，但标准。

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

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

无论如何，我可以把它带到真正覆盖的地方选择？

请参阅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;
}

自定义HTML选择菜单

1 个答案: