下拉选择框无法正确显示与自定义CSS？

如何为Chrome和Safari添加自定义CSS选择框样式？有没有修复？下拉选择框无法正确显示与自定义CSS？

来源

2013-04-05 Josh

答案：您需要添加-webkit-appearance：none;以及Chrome和Safari的高度值。

有什么建议吗？

资源： http://bavotasan.com/2011/style-select-box-using-only-css/

试试它的jsfiddle删除和添加风格在谷歌浏览器：

之前： - http://jsfiddle.net/JoshSalway/jw6Qy/

后： - http://jsfiddle.net/JoshSalway/cMbTB/

select{ 
    -webkit-appearance: none; 
}

来源

2013-04-05 01:15:45 Josh

您在使用Google搜索之前发布了您的问题吗？ – metadept 2013-04-05 01:17:19

@metadept其实我在Google上发现它感谢评论。其实添加这个问题来帮助你的开发者王先生。 – Josh 2013-04-05 01:21:01

< select>标签是固执的生物，但有是的一种方式。

如果标签中有一个“size”参数，几乎所有的CSS都会应用。使用这种技术，我创建了一个实际上等同于正常选择标签的小提琴，此外，可以用视觉语言中的ComboBox手动编辑该值（除非您在输入标签中只输入）。

所以这里有一个小例子，看看背后的原理：
（你需要的jQuery的咔嗒机构）：

<style> 

    /* only these 2 lines are truly required */ 
    .stylish span {position:relative;} 
    .stylish select {position:absolute;left:0px;display:none} 

    /* now you can style the hell out of them */ 
    .stylish input { ... } 
    .stylish select { ... } 
    .stylish option { ... } 
    .stylish optgroup { ... } 

</style> 
... 
<div class="stylish"> 
    <label> Choose your superhero: </label> 
    <span> 
     <input onclick="$(this).closest('div').find('select').slideToggle(110)"> 
     <br> 
     <select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());"> 

      <optgroup label="Fantasy"></optgroup> 
      <option value="gandalf">Gandalf</option> 
      <option value="harry">Harry Potter</option> 
      <option value="jon">Jon Snow</option> 

      <optgroup label="Comics"></optgroup> 
      <option value="tony">Tony Stark</option> 
      <option value="steve">Steven Rogers</option> 
      <option value="natasha">Natasha Romanova</option> 

     </select> 
    </span> 
</div>

这里有一些更多的风格小提琴： https://jsfiddle.net/dkellner/7ac9us70/

希望这会有所帮助！

来源

2016-06-12 12:12:26 dkellner

下拉选择框无法正确显示与自定义CSS？

回答

相关问题