Question

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

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

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

.radio {
    background-color: #FFFFFF;
}

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

我是否必须诉诸图像？

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

Answer 1

您可以使用CSS attribute selector [attributename]进行此操作。

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

Answer 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*/
   });
});

Answer 3

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

border-color #ffffff;

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

border: 0px solid #ffffff;

或者他们沿线的东西！

Answer 4

带有背景图片的

Replace them。

Answer 5

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

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

5 个答案: