如何更改单选按钮悬停颜色

Posted 2023-03-06

【中文标题】如何更改单选按钮悬停颜色

【英文标题】：How change the radio button hover color

【发布时间】：2012-03-07 19:12:45

【问题描述】：

我正在使用这个 css 代码作为文本区域的悬停颜色并输入它在除 IE 之外的所有浏览器中都可以正常工作，如下图所示。如何将单选按钮背景设置为仅透明。

我的css代码：

 input:focus, input:hover, textarea:focus, textarea:hover 
 border: 0 none;
 background: blue;
 

【参考方案1】：

由于您直接设置input 的样式，因此单选按钮和复选框也将成为目标。避免这种情况的一种简单方法是使用:not() 选择器，如下所示：input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=image]):not([type=button]):focus。请注意，这在 IE

【参考方案2】：

powerbuoy 是正确的，输入选择器除了选择普通文本框外，还选择复选框和单选框。 但我有一个建议，你可以使用它来代替他的，它可以在更多浏览器中使用。 基本上，您可以为所有复选框和单选按钮输入添加一个类。 所以你的复选框和收音机 html 变成了

<input type="checkbox" class="checkbox">
<input type="radio" class="radio">

然后添加 css 来重置复选框和单选框的样式

input.checkbox, input.radio

    background:transparent;