我在twitter bootstrap中的选择下拉按钮出现问题.这是在我在机器上安装的两个浏览器(IE11,Chrome)中发生的,它不仅限于“我的网站”.
以下是自举网站的屏幕截图(操作系统:Windows 8.1 broswer:Chrome)(http://getbootstrap.com/css/#forms-controls):
我已经检查了控制台窗口,所有资源正确加载.
解决方法
TL; DR:您不能使用CSS来更改图标.您必须使用一个使用HTML和JavaScript实现类似选择的控件的库(以代替iOS和Android上的适合移动设备的选择).
< select>中显示的图标由用户的浏览器或操作系统决定.您不能使用CSS更改它.
在Mac上选择Chrome中的显示:
我删除了line-height,background-color,border,border-radius和Box-shadow.请注意,即使我没有改变任何相关的风格,箭头也发生了变化.
在Chrome上选择显示:
请注意,图标是不同的,即使代码是相同的.
怎么办?
虽然选择不是很风格,但是有许多库提供了类似选择的控件的非常可定制的实现.我喜欢使用Bootstrap-select.
该库创建< div class =“caret”>< / div>可以将其设置为更改图标.例如,在包含引导选择JavaScript之后,以下代码:
HTML
<select class="selectpicker"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select>
CSS
.caret{ color: red; }
给我这个显示:
尽管如此,您将会失去手机显示:
原文地址:https://www.jb51.cc/html/229421.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。