Question

球员，我有一些输入复选框标签：它们看起来很轻，难以看到或打印。我试过restyle复选框，似乎禁用复选框的样式无法更改？你们有什么想法吗？非常感谢！：）

Answer 1

诀窍是不要实际禁用复选框，而是拦截“禁用”文本框的点击操作，这样它就像从那一点被禁用一样，你可以设置它的样式，它会看起来你想要的样子。

您要做的是在“已禁用”复选框中添加此项，而不是禁用=“已禁用”：

onclick="return false;"

编辑：如下所述，使用此方法存在缺陷。复选框的值仍然会回发到服务器，因为它在技术上已启用，而如果您使用支持的方法，则会失去对外观的控制，但不必处理此附加数据。（谢谢罗伯特）

Answer 2

如果您使用默认样式的默认复选框，则不必过于担心。他们把它们设计得很好，可以看作它们应该是也可以是你的显示器对比度/亮度设置。

但如果您使用的是自定义复选框设计，则很可能需要更改图像。

Answer 3

查看这个问题： How to change checkbox's border style in CSS?

似乎不可能改变复选框的样式：/

Answer 4

有了一点CSS3，你实际上可以做一些非常酷的事情。

我找到了这个可能的解决方案http://jsfiddle.net/HCbRF/1/

HTML

<div>
    <input type="checkbox" id="c1" disabled />
    <label for="c1"><span></span>Check Box 1</label>
    <br>
    <input type="checkbox" id="c2"/>
    <label for="c2"><span></span>Check Box 2</label>
</div>

CSS

div {
    width:110px;
    height:50px;
    padding:20px;
    background:#40464b;
    border-radius:6px;
}
input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label {
    color:#f2f2f2;
    font-family:Arial, sans-serif;
    font-size:14px;
    line-height: 25px;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
   background:url(http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[disabled] + label span {
    display:inline-block;
    width:16px;
    height:16px;
    margin:-1px 6px 0 0;
    vertical-align:middle;
    background:#ccc left top no-repeat;
    border-radius: 3px;
    -moz-box-shadow: inset 0 0 2px #000;
    -webkit-box-shadow: inset 0 0 2px#000;
    box-shadow: inner 0 0 5px #888;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
       background:url(http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/check_radio_sheet.png) -19px top no-repeat;
}

我从本教程http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/

开始

Answer 5

您可以排除禁用属性，将指针事件设置为无并添加一点不透明度。

<input
    checked="true"
    style="pointer-events: none; opacity: 0.7"
    type="checkbox"
 />

如何更改禁用输入复选框标记的css？..因为它太轻且难以看清

5 个答案: