html – Twitter Bootstrap选择箭头丢失

概述我在twitter bootstrap中的选择下拉按钮出现问题.这是在我在机器上安装的两个浏览器(IE11,Chrome)中发生的,它不仅限于“我的网站”. 以下是自举网站的屏幕截图( *** 作系统：Windows 8.1 Broswer：Chrome)(http://getbootstrap.com/css/#forms-controls)： 我已经检查了控制台窗口,所有资源正确加载. 任何人都可以帮 我在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中的显示：

在Mac上选择Chrome中的显示,并删除某些样式：

我删除了line-height,background-color,border,border-radius和Box-shadow.请注意,即使我没有改变任何相关的风格,箭头也发生了变化.

在Chrome上选择显示：

请注意,图标是不同的,即使代码是相同的.

怎么办？

虽然选择不是很风格,但是有许多库提供了类似选择的控件的非常可定制的实现.我喜欢使用Bootstrap-select.

该库创建< div class =“caret”>< / div>可以将其设置为更改图标.例如,在包含引导选择JavaScript之后,以下代码：

HTML

<select >    <option>Mustard</option>    <option>Ketchup</option>    <option>Relish</option></select>

CSS

.caret{    color: red;}

给我这个显示：

尽管如此,您将会失去手机显示：

使用自定义库将禁用iOS和AndroID实现的移动友好方式选择,因此在继续 *** 作之前,请确保自定义图标对您来说足够重要.

总结

以上是内存溢出为你收集整理的html – Twitter Bootstrap选择箭头丢失全部内容，希望文章能够帮你解决html – Twitter Bootstrap选择箭头丢失所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。