CSS 如何设置禁用的单选按钮的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3109964/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to style a disabled radio button?
提问by Terry G Lorber
I have a set of radio buttons within a table cell. The table cell's background color differs from the page background.
我在表格单元格中有一组单选按钮。表格单元格的背景颜色与页面背景不同。
Based on another input, I sometimes disable one or more radio buttons. When disabled, the interior of the radio button assumes the table cell's background. The circle coloring grays out a bit. This combines to make the button look like it "disappeared". Closer inspection shows it to still be there.
根据另一个输入，我有时会禁用一个或多个单选按钮。禁用时，单选按钮的内部采用表格单元格的背景。圆圈颜色变灰了一点。这结合起来使按钮看起来像“消失了”。仔细检查表明它仍然存在。
I've been struggling to define a CSS entry to change the appearance of the disabled radio button... can it be done? Currently, I'm doing something like this:
我一直在努力定义一个 CSS 条目来改变禁用的单选按钮的外观......可以做到吗？目前，我正在做这样的事情：
.radio {
background-color: #FFFFFF;
}
.radio:disabled {
background-color: #FFFFFF;
}
Will I have to resort to images?
我必须求助于图像吗？
UPDATEIt's not the background that's the problem, but the interior of the button. When disabled the interior of the button takes on the background color of the table cell... ooh, here's an idea. I change both the table cell and the radio button.
更新问题不是背景，而是按钮的内部。禁用后，按钮的内部将呈现表格单元格的背景颜色......哦，这是一个想法。我更改了表格单元格和单选按钮。
回答by BalusC
You can use the CSS attribute selector[attributename]for this.
您可以为此使用CSS 属性选择器[attributename]。
.radio[disabled] {
background-color: #FFFFFF;
}
回答by jlbofh
Maybe one solution is not disable anything and just
也许一种解决方案不是禁用任何东西而只是
- Change the opacity
- Capture events and implement your own behaviour
- 改变不透明度
- 捕获事件并实现您自己的行为
Something like:
就像是：
<input type="radio" name="i1" class="enabledinput" />
in your css write:
在你的 css 中写：
.disabledinput {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
.enabledinput {
opacity: 1;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
and then for example if you use jquery in your javascript write:
然后例如如果你在你的 javascript 中使用 jquery 写：
$(".enabledinput").each(function(i,obj) {
$(obj).click(function(evt) {
$(obj).removeClass("enabledinput");
$(obj).addClass("disabledinput");
/*do something here*/
});
});
回答by Cuberic
An easy way to change the style of a disabled radio button is a simple absolute positioned overlay with the :after attribute. You can adjust the background color and borders as you see fit.
更改禁用单选按钮样式的一种简单方法是使用 :after 属性进行简单的绝对定位叠加。您可以根据需要调整背景颜色和边框。
input[disabled] {
position: relative;
height:15px;
width: 15px;
box-sizing: border-box;
margin: 0;
&:after {
position: absolute;
content: '';
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background-color:red;
}
}
here is an example pen https://codepen.io/Cuberic/pen/PmQoVd
回答by RobertPitt
Try adding the border colour as i believe thats the initial edge styling.
尝试添加边框颜色，因为我相信这是初始边缘样式。
border-color #ffffff;
Also you might want to set the border to have no edge styling.
此外，您可能希望将边框设置为没有边缘样式。
border: 0px solid #ffffff;
Or something along them lines!
或者类似的东西！
回答by reisio
Replace themwith background images.
用背景图像替换它们。
