如何更改select option 边框颜色和选中的颜色，css优先，js次之??

Posted 2023-05-05

如何更改select option 边框颜色和选中的颜色，css优先，js次之??

HTML是超文本标记语言的缩写（HyperText Markup Language），作用是利用HTML标记，告诉浏览器被标记的内容要如何摆放及内容的含义，如：<p>这是个段落元素</p>，这里，被标记的内容是“这是个段落元素”这句话，而<p></p>则是HTML的标记；当浏览器读取到这个标记时，就会知道这里的内容是一个段落文本，然后用相应的格式显示。

HTML的语法规则：

要让页面正确的显示，就必须使用正确的HTML语法和HTML元素，如：对于标题应该使用<h1>、<h2>、<h3>...等标题元素，而对于一整段的文字内容则应该使用<p>元素
一个规范的页面代码有利于维护和阅读，要想知道自己的HTML代码是否规范，可以使用w3school的HTML验证工具来检查，然后根据检查结果进行调整，直至通过验证为止。
用一个实际的例子来总结以上的内容：

左边是源代码，右边是运行结果

页面通过w3school验证工具的验证。

HTML常用标签

1.<p>段落标签</p> ：用来定义网页中的一段文本，段落与段落之间换行。
属性：align ；定义段落中的文本水平方向的对齐方式。
属性值：left（左对齐）、right（右对齐）、center（居中对齐）

2.<br/> ：换行标签，指行与行之间换行，他是一个单标签。

两者的区别：
<br/>：是单标签，小行换行提行；
<p></p> ：是双标签，大行换行分段；

3.<h1></h1>---<h6></h6>：
<h1></h1>：代表一级标题，级别高，字体 也最大，其他依次递减。
<h6></h6>：级别最小，字体最小
属性：align ；定义标题中的文本水平方向的对齐方式。
属性值：left（左对齐）、right（右对齐）、center（居中对齐） 参考技术A 我们将使用纯CSS打造一些切换开关并使其拥有类似于checkbox的用户体验。

很多时候我们都需要用户通过勾选/取消checkbox来表明他们对一些问题的答案。我们设置了一个标签，一个checkbox，并在提交表单后获取checkbox值，以查看用户是否已经选中或取消选中该checkbox。我们都知道默认的的checkbox长啥样，而且还不能通过纯CSS的方式来设置checkbox的样式。这种元素的样式由每个浏览器引擎单独管理(每个浏览器下面checkbox的样式都可能不一样)。于是，有一个更统一的界面岂不是会更好？

不要急！一个小小的CSS技巧可以帮助我们解决这个问题。通过将:checkded, :before和:after伪类结合到我们的checkbox上，我们可以实现一些漂亮并拥有平滑过渡效果的切换型开关。没有黑魔法...仅仅是CSS的魅力。下面让我们开始吧。

需要用到的HTML并不是我们之前没见过的，也就是一个标准的checkbox结合一个label。我们用一个div将checkox和label包裹起来，并给这个div添加了一个switch的样式类。

label的样式则会使用input + label选择器来定位，那样label就不需要自己的样式类名了。现在让我们来看下下面的HTML结构：

这里没什么特别的。对于CSS,我们希望真实的checkbox被隐藏在屏幕和视线之外。基本上所有的样式都被加在label上。这样做很方便，因为点击label实际上会勾选/取消勾选checkbox。我们将用下面的CSS来实现切换开关：

.cmn-toggle position: absolute; margin-left: -9999px; visibility: hidden;.cmn-toggle + label display: block; position: relative; cursor: pointer; outline: none; user-select: none;
样式一

此时label充当容器的角色，并拥有宽和高。我们还给它设置了一个背景颜色来模拟我们的切换开关的边界。:before元素模拟开关内部的浅灰色区域(开关打开时背景颜色会过渡到绿色)。:after元素才是真正的圆形开关，它的层级高于一切，在点击时的时候它将从左滑动到右。我们将给:after元素添加一个box-shadow使它看起来更加立体。当input接受:checked伪类时，我们将平滑的改变:before元素的背景颜色和:after元素的位置 参考技术B 你好边框颜色通过在select 外包一层div 通过 border: 来更改边框颜色。选中颜色，通过js获取选中的元素，然后更改选中元素的背景颜色 参考技术C

亲，这个是默认样式用css改不了，您可以转向另一种思路，用背景图片去覆盖边框

参考技术D 受浏览器限制，select 标签的 option 不能添加自定义样式，只能显示浏览器默认的样式；默认展示啥样就是啥样；即使加了 css，由于浏览器不支持，仍然会渲染不出效果来；
如果要美化 select 的这个下拉选择功能；可以自定义使用 div + css 来模拟这个效果；

如何更改 FireFox 中悬停的 Select-Option 的颜色

【中文标题】如何更改 FireFox 中悬停的 Select-Option 的颜色

【英文标题】：How to change the Color of the hovered Select-Option in FireFox

【发布时间】：2011-10-25 01:08:38

【问题描述】：

我想更改 FireFox 中悬停的 Select-Option 的颜色，它具有默认的蓝色背景和白色前景。

我试过了：

<select name="select" size="1">
   <option>0</option>
   <option class="test">1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
</select>

.test:hover 
    color:green;
    background-color:yellow;
    text-decoration:underline;

但它不起作用。见Example。 一个 FireFox 特定的解决方案就足够了。

【问题讨论】：

看来你不能这样做看看***.com/questions/1667086/…

很遗憾，你做不到。

Change Select List Option background colour on hover的可能重复

【参考方案1】：

我认为您可能需要像这样使用 CSS 组合器：

select>option.test:hover

    color: #1B517E;
    cursor: pointer;

基本上你是在指定这个：

父>子。类：事件

选择标签中的所有子标签，其中“.test”类的选项将具有括号中指定的样式。

重要提示：它适用于 Firefox，但不适用于 Chrome。

这里有一个可以帮助你的参考：http://www.w3schools.com/css/css_combinators.asp

【参考方案2】：

我发现我可以将图像设置为背景。

jsfiddle demo

但它只在 :hover 上绘制，当我从选项中退出鼠标时，它将由系统呈现。

【参考方案3】：

仅靠 CSS 是无法做到的。我推荐 jQuery + Chosen 插件替换 <select>

【讨论】：

问题是：<select> 是由 GWT 生成的，我不能为这个问题使用更多的库。

嗯，好的，您可能想将该信息添加到问题中：-)

【参考方案4】：

SELECT 元素由操作系统呈现，而不是 HTML。您无法设置此元素的样式。

您可以使用 HTML+CSS 替换使用 JavaScript 来模拟 SELECT。

【讨论】：

为什么text-decoration:underline; 有效？全局选择颜色更改也适用于选项。

+1 相同的想法，而且比我快。我正在搜索我的书签以找到插件链接！

SEELCT 可能是 CSS 中最大的不一致之一。一些浏览器允许一些样式，但没有标准。见：***.com/questions/1072239/…