Question

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

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

请记下我正在使用的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：{之后 background-image：url（＆＃34; data：image / 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％20×％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背景％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＆＃34）; }

Answer 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

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

1 个答案: