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

<输入类型=“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。

其他回答

由于像Edge和Firefox这样的浏览器不支持:before:after on复选框输入标签,这里有一个纯HTML和CSS的替代方案。当然,您应该根据您的要求编辑CSS。

让复选框的HTML像这样:

<div class='custom-checkbox'>
    <input type='checkbox' />
    <label>
        <span></span>
        Checkbox label
    </label>
</div>

为复选框应用此样式可更改颜色标签

<style>
    .custom-checkbox {
        position: relative;
    }
    .custom-checkbox input{
        position: absolute;
        left: 0;
        top: 0;
        height:15px;
        width: 50px;    /* Expand the checkbox so that it covers */
        z-index : 1;    /* the label and span, increase z-index to bring it over */
        opacity: 0;     /* the label and set opacity to 0 to hide it. */
    }
    .custom-checkbox input+label {
        position: relative;
        left: 0;
        top: 0;
        padding-left: 25px;
        color: black;
    }
    .custom-checkbox input+label span {
        position: absolute;  /* a small box to display as checkbox */
        left: 0;
        top: 0;
        height: 15px;
        width: 15px;
        border-radius: 2px;
        border: 1px solid black;
        background-color: white;
    }
    .custom-checkbox input:checked+label { /* change label color when checked */
        color: orange;
    }
    .custom-checkbox input:checked+label span{ /* change span box color when checked */
        background-color: orange;
        border: 1px solid orange;
    }
</style>

有一种方法可以使用CSS来做到这一点。我们可以(ab)使用label元素并样式化该元素。需要注意的是,这将不适用于Internet Explorer 8及更低版本。

.myCheckbox输入{ 位置:相对; z - index: -9999; } .myCheckbox span { 宽度:20 px; 高度:20 px; 显示:块; 背景:url(“link_to_image”); } .myCheckbox输入:checked + span { 背景:url(“link_to_another_image”); } <label for="test">我的样式化的"复选框"的标签</label> <标签类= " myCheckbox " > <input type="checkbox" name="test" /> < span > < / span > < / >标签

使用纯CSS,没有花哨的:before和:after,没有转换,您可以关闭默认外观,然后使用内联背景图像对其进行样式化,如下例所示。这适用于Chrome, Firefox, Safari,现在是Edge (Chromium Edge)。

INPUT[type=checkbox]:focus { outline: 1px solid rgba(0, 0, 0, 0.2); } INPUT[type=checkbox] { background-color: #DDD; border-radius: 2px; appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 17px; height: 17px; cursor: pointer; position: relative; top: 5px; } INPUT[type=checkbox]:checked { background-color: #409fd6; background: #409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat; } <form> <label><input type="checkbox"> I Agree To Terms &amp; Conditions</label> </form>

从我的谷歌,这是最简单的方法复选框样式。只需根据您的设计添加: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>

警告:在撰写本文时,以下内容是正确的,但与此同时,事情有了进展。

AFAIK现代浏览器使用本机操作系统控件显示复选框,所以没有办法对它们进行样式化。