更改 jquery select 元素的下拉图标颜色答案

【问题标题】：Changing the drop down icon color of jquery select element更改 jquery select 元素的下拉图标颜色
【发布时间】：2016-06-03 22:15:28
【问题描述】：

我想更改 jquery 选择元素的下拉图标颜色。它在下面的屏幕截图中突出显示，下面是重现该问题的最少代码。

我无法控制图标颜色，虽然我可以看到一些改变背景颜色的方法，但我想改变那个图标颜色。

请记下我正在使用的 jquery 和 jquery-mobile 库的代码。

有人对如何控制这种颜色有任何想法吗？

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="../js/libs/jquery-mobile/jquery.mobile-1.4.5.css" />


<script src="../js/libs/jquery/jquery-min.js"></script>
<script src="../js/libs/jquery-mobile/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
                <select>
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                    <option>Option 4</option>
                </select>

</body>
</html>

图片：

箭头的 CSS：

.ui-icon-carat-d:after { 背景图像: url("数据:图像/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E% 3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1 .1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg %22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px %22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace %3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23FFFFFF%3B%22%20points%3D%2211.949%2C3.404%207%2C8.354%202.05%2C3.404%20-0.071 %2C5.525%207%2C12.596%2014.07%2C5.525%20%22%2F%3E%3C%2Fsvg%3E"); }

【问题讨论】：

你能在 plunker/fiddle 上复制这个吗？
另外，你的代码中的图标在哪里？
真的没有图标，如果你使用我的HTML，那么你可以重现这个问题..
你可能需要覆盖图标的css类，jsfiddle.net/CaseyRule/f7q8sp43/1
@RandomChannel 我没有图标代码，这是 jquery mobile 做的东西..

标签： jquery css jquery-mobile

【解决方案1】：

您应该更改jquery.mobile-1.4.5.css 中的样式即一些类

// this is arrow
.ui-icon-carat-d:after

// this is rounded background behind arrow
.ui-btn-icon-left:after, .ui-btn-icon-right:after, .ui-btn-icon-top:after, .ui-btn-icon-bottom:after, .ui-btn-icon-notext:after

【讨论】：

只是好奇，你是如何识别它的？？
@hagrawal 使用 chrome 开发工具
我也试过那个，但我看不到那些类..我检查了所有样式..我得到了这些 css 类“.ui-select .ui-btn”但是你是怎么想出来的一个？？
伙伴，我只是使用了我在问题中提供的 HTML，然后尝试使用 Chrome 开发工具，但我看不到这些类。我问的原因是因为我不想着色从白色到蓝色的向下箭头..你有什么想法吗？？
我已经获得了箭头的 CSS 并在我的答案中对其进行了更新，但不知道该图像是如何......我可以用我的图像替换它吗？如何更改箭头颜色..