我试图使用以下样式的复选框:

<输入类型=“checkbox”样式=“border:2px点数:00f;显示:block;背景:ff0000;”/>

但是没有应用样式。复选框仍然显示其默认样式。我如何给它指定的样式?


当前回答

这是一个CSS/HTML的版本,不需要jQuery或JavaScript,简单干净的HTML和真正简单和短的CSS。

这是JSFiddle

http://jsfiddle.net/v71kn3pr/

下面是HTML:

<div id="myContainer">
    <input type="checkbox" name="myCheckbox" id="myCheckbox_01_item" value="red" />
    <label for="myCheckbox_01_item" class="box"></label>
    <label for="myCheckbox_01_item" class="text">I accept the Terms of Use.</label>
</div>

这是CSS

#myContainer {
    outline: black dashed 1px;
    width: 200px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] {
    display: none;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:not(:checked) + label.box {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: black solid 1px;
    background: #FFF ;
    margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:checked + label.box {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: black solid 1px;
    background: #F00;
    margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] + label + label.text {
    font: normal 12px arial;
    display: inline-block;
    line-height: 27px;
    vertical-align: top;
    margin: 5px 0px;
}

这可以调整为能够有单独的单选或复选框,复选框组和单选按钮组。

这个html/css,将允许你也捕获点击标签,所以复选框将被选中和未选中,即使你只是点击标签。

这种类型的复选框/单选按钮适用于任何形式,完全没有问题。已测试使用PHP, ASP。NET (.aspx), JavaServer Faces和ColdFusion。

其他回答

快速修复在文本前面添加图标:

< asp:CheckBox... Text="< img src='/link/to/img.png' />My Text" />

CodepenLink

-只需添加CSS属性。不需要添加任何Javascript。

SCSS / SASS实现

更现代的方法

对于使用SCSS(或容易转换为SASS)的人来说,下面的内容将会有所帮助。有效地,在复选框旁边创建一个元素,这就是您要设置样式的元素。当单击复选框时,CSS重新设置姐妹元素的样式(为您选中的新样式)。代码如下:

label.checkbox { input[type="checkbox"] { visibility: hidden; display: block; height: 0; width: 0; position: absolute; overflow: hidden; &:checked + span { background: $accent; } } span { cursor: pointer; height: 15px; width: 15px; border: 1px solid $accent; border-radius: 2px; display: inline-block; transition: all 0.2s $interpol; } } <label class="checkbox"> <input type="checkbox" /> <span></span> Label text </label>

从我的谷歌,这是最简单的方法复选框样式。只需根据您的设计添加:after和:checked:after CSS。

body{ background: #DDD; } span{ margin-left: 30px; } input[type=checkbox] { cursor: pointer; font-size: 17px; visibility: hidden; position: absolute; top: 0; left: 0; transform: scale(1.5); } input[type=checkbox]:after { content: " "; background-color: #fff; display: inline-block; color: #00BFF0; width: 14px; height: 19px; visibility: visible; border: 1px solid #FFF; padding: 0 3px; margin: 2px 0; border-radius: 8px; box-shadow: 0 0 15px 0 rgba(0,0,0,0.08), 0 0 2px 0 rgba(0,0,0,0.16); } input[type=checkbox]:checked:after { content: "\2714"; display: unset; font-weight: bold; } <input type="checkbox"> <span>Select Text</span>

看起来你只需要使用CSS就可以改变复选框的灰度颜色。

下面将复选框从黑色转换为灰色(这是我想要的):

input[type="checkbox"] {
    opacity: .5;
}