blocks|key|307890|text|select+option+和tag+tag的样式非常有限。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|307891|这是因为它们的显示方式可能会因浏览器/操作系统而异。想象一下当你点击手机上的select标签时会发生什么。在桌面浏览器上，您不会得到预期的下拉列表。所以你不能设计通用的样式，因为它不会原生地显示所有地方的保存。|307892|样式的可能性是：主要在select标签上，但在option上非常有限。例如，可以禁用选择框的原生样式：|307893|select+{
++++appearance:+none;
++++/*+may+need+vendors+prefixes.+*/
}|code-block|syntax|javascript|307894|另一个解决方案是:使用其他标签模拟选择框的+jQuery插件：|307895|选择所有谷歌可能返回的关键字"jQuery+|307896|https://jqueryui.com/selectmenu/|unordered-list-item|307897|https://github.com/marcj/jquery-selectBox|307898|And“:)|307899|307900|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|6|7|6|E|1|J|B|0|6|7|6|0|0|0|8|B|6|N|6|0|0|D|8|0|0|0|W|0|0|0|15|1|0|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]|$9|1I|A|1J|B|D]|$9|1K|A|1L|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|1M|8|@]|E|@]|F|$]]|$1|I|3|J|5|6|7|1N|8|@$9|1O|A|1P|B|C]|$9|1Q|A|1R|B|D]|$9|1S|A|1T|B|D]]|E|@]|F|$]]|$1|K|3|L|5|M|7|1U|8|@]|E|@]|F|$N|O]]|$1|P|3|Q|5|6|7|1V|8|@$9|1W|A|1X|B|C]]|E|@]|F|$]]|$1|R|3|S|5|6|7|1Y|8|@]|E|@]|F|$]]|$1|T|3|U|5|V|7|1Z|8|@]|E|@$9|20|A|21|1|22]]|F|$]]|$1|W|3|X|5|V|7|23|8|@]|E|@$9|24|A|25|1|26]]|F|$]]|$1|Y|3|Z|5|V|7|27|8|@]|E|@]|F|$]]|$1|10|3|-4|5|6|7|28|8|@]|E|@]|F|$]]|$1|11|3|-4|5|6|7|29|8|@]|E|@]|F|$]]]|12|$13|$5|14|15|16|F|$17|U]]|18|$5|14|15|16|F|$17|X]]]]

Styling <code>select</code> and <code>option</code> tag is very limited.

This is because the way they are displayed may change according to the browser/the OS. Think about what happens when you click a select tag on your phone. You don't get a dropdown list as expected on a desktop browser. So you couldnt style something universal as it doesn't natively display the save everywhere.

Styling possibilities are: mainly on the <code>select</code> tag but very restricted on the <code>option</code>. You could for example disable the native style of the select box:

<pre><code>select {
 appearance: none;
 /* may need vendors prefixes. */
}
</code></pre>

Other solution is: jQuery plugins that simulate select box using other HTML tags:

<ul>
<li><a href="https://jqueryui.com/selectmenu/" rel="nofollow">https://jqueryui.com/selectmenu/</a></li>
<li><a href="https://github.com/marcj/jquery-selectBox" rel="nofollow">https://github.com/marcj/jquery-selectBox</a></li>
<li>And all that Google may return you with keywords "jQuery select box" :)</li>
</ul>

blocks|key|867071|text|选项元素由操作系统呈现，而不是由HTML呈现。不能修改这些元素的样式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|867072|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Option elements are rendered by the OS, not HTML. You cannot change the style for these elements.

blocks|key|675193|text|试试这个，希望它能行得通|type|unstyled|depth|inlineStyleRanges|entityRanges|data|675194|<select+class="hover_color"+style="width:245px;">
+++<option+value="rseleccionar">Seleccione..</option>
+++<option+value="bs">Bienes+Separados</option>
+++<option+value="bm">Bienes+Mancomunados</option>
</select>

.hover_color:hover+{+background-color:+red;+border:1px+solid+red+}|code-block|syntax|javascript|675195|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this, hope it'll work

<pre><code>&lt;select class="hover_color" style="width:245px;"&gt;
 &lt;option value="rseleccionar"&gt;Seleccione..&lt;/option&gt;
 &lt;option value="bs"&gt;Bienes Separados&lt;/option&gt;
 &lt;option value="bm"&gt;Bienes Mancomunados&lt;/option&gt;
&lt;/select&gt;

.hover_color:hover { background-color: red; border:1px solid red }
</code></pre>

<pre><code>&lt;select style="width:245px;"&gt;
 &lt;option value="rseleccionar"&gt;Seleccione..&lt;/option&gt;
 &lt;option value="bs"&gt;Bienes Separados&lt;/option&gt;
 &lt;option value="bm"&gt;Bienes Mancomunados&lt;/option&gt;
&lt;/select&gt;
</code></pre>

I want to change the blue color of default for another.

How can I change color of a select option with CSS on hover?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

<select style="width:245px;"> <option value="rseleccionar">Seleccione..</option> <option value="bs">Bienes Separados</option> <option value="bm">Bienes...

问如何在CSS悬停时更改选择选项的颜色？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在CSS悬停时更改选择选项的颜色？EN