Twitter Bootstrap选择箭头缺失 [英] Twitter Bootstrap Select Arrow Missing

问题描述

我在twitter bootstrap中的select下拉按钮有问题。这是发生在我安装在机器上的两个浏览器（IE11，Chrome），它不只是限于我的网站。

这里是一个屏幕截图网站（操作系统：Windows 8.1 Broswer：Chrome）（

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

$ b b

我移除了行高，背景颜色，边框，边框半径和框阴影。请注意，即使我没有更改任何相关样式，箭头也已更改。

在Chrome上选择在Windows上显示：

请注意，即使代码相同，图标也不同。

现在是什么？

虽然select不是非常styleable，但是有许多库提供了一个非常可定制的选择控件实现。我喜欢使用

您将失去移动显示：

使用自定义库会禁用iOS和Android实现的移动设备友好方式，因此在继续之前，请确保自定义图标非常重要。

I'm having an issue with the select drop down button in twitter bootstrap. It's happening in the two browsers I have installed on the machine (IE11, Chrome) and it's not just restricted to 'my sites'.

Here is a screenshot of the bootstrap website (OS: Windows 8.1 Broswer: Chrome) (http://getbootstrap.com/css/#forms-controls):

I have checked the console window and all resources are loading correctly.

Could anyone help me with why this is happening / steps to resolve?

解决方案

TL;DR: you can't use CSS to change the icon. You'll have to use a library that implements a select-like control using HTML and JavaScript (at the expense of mobile-friendly selects on iOS and Android).

The icon displayed in <select> is determined by the user's browser or operating system. You can't change it using CSS.

Select display in Chrome on a Mac:

Select display in Chrome on a Mac with some styles removed:

I removed line-height, background-color, border, border-radius, and box-shadow. Note that the arrow has changed even though I didn't change any related style.

Select display in Chrome on Windows:

Notice that the icons are different, even though the code is the same.

Now what?

Although select isn'g very styleable, there are many libraries that provide a very customizable implementation of a select-like control. I like to use Bootstrap-select.

This library creates a <div class="caret"></div> that can be styled to change the icon. For example after including the Bootstrap-select JavaScript, the following code:

HTML

<select class="selectpicker">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>

CSS

.caret{
    color: red;
}

Gives me this display:

You'll lose mobile display, though:

Using a custom library will disable the mobile-friendly way iOS and Android implement selects, so make sure a custom icon is important enough to you before proceeding.

这篇关于Twitter Bootstrap选择箭头缺失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！