如何灰显html复选框？

Question

我想制作只读复选框.像这样:

<input type="checkbox" onclick="return false;">

我希望复选框看起来像是禁用或灰显.

我怎样才能做到这一点？

Answer 1

您还需要禁用该复选框:

<input type="checkbox" onclick="return false;" disabled="disabled">

要发布该值,只需将其设为只读:

<input type="checkbox" onclick="return false;" readonly="readonly">

您可以使用CSS设置复选框标签和只读输入的样式,例如:input [readonly ="readonly"] {}但是当设置为readonly时,浏览器应该使复选框显示为灰色.

更新:

在设置复选框并在所有浏览器中一致地设置样式时,您受浏览器的支配,您必须使用图像,例如:http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

如果您不想这样做(并且它似乎是一个长期解决方案),最简单的解决方案是禁用复选框以使其正确显示,并将值作为隐藏输入发布,例如:

<input type="checkbox" onclick="return false;" disabled="disabled">
<input type="hidden" name="checkboxval" value="111" />

Answer 2

只需像这样在复选框上添加“禁用”属性

<input type="checkbox" disabled="disabled" />

Answer 3

input.readonly {
   opacity: .5;
   cursor: default;
   pointer-events: none;
   
}

<input type="checkbox"> <br />
<input type="checkbox" class="readonly">

将一个类添加readonly到要灰显的元素：通过 css 设置opacity并更改cursor. pointer-events: none将阻止任何点击事件，因此JS没有必要。

Answer 4

将禁用的复选框变灰的简单、仅 CSS 的方法。

input[type=checkbox][disabled] {
    filter: invert(25%);
}