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

Question

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

根据另一个输入，我有时会禁用一个或多个单选按钮。当被禁用时，单选按钮的内部会呈现出表格单元格的背景颜色，圆圈颜色会变暗。这样组合起来使得按钮看起来像是“消失”了。更仔细的观察显示它仍然存在。

我一直在尝试定义一个CSS条目来改变禁用单选按钮的外观...是否可以实现？目前，我正在做类似于以下的事情：

.radio {
    background-color: #FFFFFF;
}

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

我会不得不使用图片吗？

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

- Terry G Lorber

Answer 1

您可以使用CSS 属性选择器 [属性名] 来实现此功能。

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

- BalusC

---

只是提一下，在IE6中属性选择器不起作用，最好在CSS文件中使用特定的类，然后进行引用。这样你就可以确保禁用样式适用于所有浏览器。 - Brian Scott

此外，一个元素可能具有“disabled”属性，但其值为false。 - Pointy

@Brian：我不再关心IE6与非功能性问题了；）@Pointy：我考虑的是HTML，而不是XHTML。它的值也可以是“disabled”，即“disabled =”disabled“”。XHTML真让人烦恼;) - BalusC

因为解决方案不起作用，所以投了一个反对票。无法更改禁用单选按钮的背景颜色。在Firefox和Chrome上进行了测试。 - Mathieu G

在Firefox 61上可以正常工作，您还可以级联属性：input[type="radio"][disabled]{ cursor: not-allowed; } - rubo77

Answer 2

也许一个解决方案是不要禁用任何东西，只需进行以下操作:

1. 改变透明度
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*/
   });
});

- jlbofh

---

抱歉...我以为它没有发送。 - jlbofh

Answer 3

一种简单的改变禁用状态单选框样式的方法是使用 :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

- Cuberic

Answer 4

尝试将边框颜色添加为初始边缘样式。

border-color #ffffff;

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

border: 0px solid #ffffff;

或者类似这样的东西！

- RobertPitt

Answer 5

用背景图替换它们。

- reisio