在Firefox中设置复选框的样式-删除复选框和边框

小编典典

在Firefox中设置复选框的样式-删除复选框和边框

css

如何在Firefox中设置复选框样式，并取消选中标记和边框？

CSS：

body { background: black; }
#conditions-form { color: white; }
#conditions-form input[type=checkbox] {
    display:inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance:none;
    appearance: none;
    width:19px;
    height:19px;
    background: url('http://demo.somedomain.com/wp-content/themes/themename/images/care-plan-checkbox.gif') no-repeat top left;
    cursor:pointer;
}
#conditions-form input[type=checkbox]:checked {
    background:url('http://demo.somedomain.com/wp-content/themes/themename/images/care-plan-checkbox-checked.gif') no-repeat top left;
}

HTML：

<form id="conditions-form">
    <ul>
        <li>
            <input id="condition3" type="checkbox" name="conditions[condition3]"></input>
            <label class="checkbox" for="condition3">Conditions 3</label>
        </li>
    </ul>
</form>

阅读 312

2020-05-16

共1个答案

小编典典

input[type=”checkbox”] {

  display:none;

}



input[type="checkbox"] + label span {

  display:inline-block;

  width:19px;

  height:19px;

  margin:-1px 4px 0 0;

  vertical-align:middle;

  background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) left top no-repeat;

  cursor:pointer;

}

input[type="checkbox"]:checked + label span {

  background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) -19px top no-repeat;

}


<input type="checkbox" id="c1" name="cc" />

<label for="c1"><span></span>Check Box 1</label>

2020-05-16