如何为禁用的单选按钮设置样式？答案

【问题标题】：How to style a disabled radio button?如何为禁用的单选按钮设置样式？
【发布时间】：2011-03-07 19:13:44
【问题描述】：

我在表格单元格中有一组单选按钮。表格单元格的背景颜色与页面背景不同。

根据另一个输入，我有时会禁用一个或多个单选按钮。禁用时，单选按钮的内部采用表格单元格的背景。圆圈颜色变灰了一点。这结合起来使按钮看起来像“消失”了。仔细检查表明它仍然存在。

我一直在努力定义一个 CSS 条目来更改禁用单选按钮的外观...可以吗？目前，我正在做这样的事情：

.radio {
    background-color: #FFFFFF;
}

.radio:disabled {
    background-color: #FFFFFF;
}

我必须求助于图像吗？

更新问题不是背景，而是按钮的内部。当禁用时，按钮的内部采用表格单元格的背景颜色......哦，这是一个想法。我同时更改了表格单元格和单选按钮。

【问题讨论】：

标签： css radio-button

【解决方案1】：

更改已禁用单选按钮样式的简单方法是使用 :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;

  }
}

这是一个示例笔https://codepen.io/Cuberic/pen/PmQoVd

【讨论】：

【解决方案2】：

也许一个解决方案不是禁用任何东西，只是

更改不透明度
捕获事件并实施您自己的行为

类似：

<input type="radio" name="i1" class="enabledinput" />

在你的 css 中写：

.disabledinput {
  opacity: 0.4;
  filter: alpha(opacity=40); /* For IE8 and earlier */
}
.enabledinput {
  opacity: 1;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}

然后，例如，如果您在 javascript 中使用 jquery：

$(".enabledinput").each(function(i,obj) {
   $(obj).click(function(evt) {
      $(obj).removeClass("enabledinput");
      $(obj).addClass("disabledinput");
      /*do something here*/
   });
});

【讨论】：

对不起...我认为它没有发送

【解决方案3】：

您可以为此使用CSS attribute selector [attributename]。

.radio[disabled] {
    background-color: #FFFFFF;
}

【讨论】：

只是提到属性选择器在 IE6 中不起作用，最好使用 css 文件中的特定类，然后您可以参考。这样您就可以确保禁用的样式适用于所有浏览器。
另外，元素可能具有“禁用”属性，但其值为false。
@Brian：我不再关心 IE6 的非功能性问题 ;) @Pointy：我想到的是 HTML，而不是 XHTML。它的值也可以是disabled，即disabled="disabled"。多么烦人，XHTML ;)
-1 票导致解决方案不起作用。无法更改已禁用单选按钮的背景颜色。在 Firefox 和 Chrome 上测试。
在 Firefox 61 上运行良好，您还可以级联属性：input[type="radio"][disabled]{ cursor: not-allowed; }

【解决方案4】：

Replace them 带有背景图片。

【讨论】：

【解决方案5】：

尝试添加边框颜色，因为我认为这是初始边缘样式。

border-color #ffffff;

您还可能希望将边框设置为没有边缘样式。

border: 0px solid #ffffff;

或者类似的东西！

【讨论】：