如何使用CSS / jquery修改HTML选择框 [英] How do I modify HTML select box using CSS / jquery
问题描述
我试图欺骗选择框的设计以充当内联选项卡/小部件。
完成一些研究后，我知道它是难以通过CSS修改。但是我认为它可能是可以管理的。
因此，根据下面的代码笔，当我点击该选项时，文本将变为白色。只有当我点击一些空白区域时，文本才会变黑。为什么会这样以及如何修复它？
其次，如何移除右侧箭杆？我在暂存网站上运行这个CSS，chrome没有显示箭头栏，但是mozilla得到了。
CodePen上的匿名笔 [ ^ ]
我的尝试：
- 我想也许是因为选择的东西，所以我尝试下面的css但没有发生任何事情
I'm trying to "cheat" the design of a select box to act as an inline tab/widget.
After done some research, I know it's hard to modify by CSS. But I think it's probably manageable.
So, based on the codepen below, when I click the option, the text will turn white. Only once I click some white space, the text become black. Why is that and how to fix it?
Secondly, how to remove the right side arrow bar thing? I run this CSS on the staging site, chrome doesn't show the arrow bar, but mozilla got.
An Anonymous Pen on CodePen[^]
What I have tried:
- I thought maybe it's because of selection thing, so I tried css below but nothing happened
::selection {color:#000 !important;}
- 我也试过选择选项：活动，选择选项：聚焦但仍然相同。
推荐答案
I很遗憾地说，你要做的事情是不可能实现的。可能无法在选择选项上设置颜色和背景颜色。但是，您可以设置背景图像。下面的代码演示了如何通过使用JQuery设置背景图像（并重置未选择选项的背景）。它还通过CSS溢出隐藏右侧滚动条：隐藏
I'm sorry to say, that what you are looking to do is not achievable. Color and background color may not be set on a select option. However, you may set the background-image. The code below demonstrates setting the background image through the use of JQuery (and resetting the background of the un-selected option). It also hides the right side scroll bar through CSS overflow:hidden
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
（document）.ready（function（）{
(document).ready(function () {
（' #mySelectList'）。change（function（）{
var
('#mySelectList').change(function (){ var
这篇关于如何使用CSS / jquery修改HTML选择框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
