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

问题描述

我在 Twitter 引导程序中的选择下拉按钮有问题.它发生在我在机器上安装的两个浏览器(IE11、Chrome)中，不仅限于我的网站".

这是引导程序网站的屏幕截图(操作系统:Windows 8.1 Broswer:Chrome)(

选择在 Mac 上的 Chrome 中显示，删除了一些样式:

我删除了 line-height、background-color、border、border-radius 和 box-shadow.请注意，即使我没有更改任何相关样式，箭头也发生了变化.

在 Windows 上的 Chrome 中选择显示:

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

现在怎么办?

尽管 select 的样式非常漂亮，但有许多库提供了一个类似 select 的控件的非常可定制的实现.我喜欢使用

不过你会失去移动显示:

使用自定义库将禁用 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屋！