Question

选中当前表单中的复选框后，我将获得刻度符号作为默认值。但在这里我需要X（十字标记）。我是否需要为此安排课程，并且必须为该课程应用任何样式。这是我正在尝试的简单形式

 <input type="checkbox"> Selected 1st element
 <input type="checkbox"> selected 2nd element

Answer 1

试试这个，我也会为你提供一个小提琴，

input[type=checkbox].css-checkbox { position: absolute;  overflow: hidden;  clip: rect(0 0 0 0);  height:1px;  width:1px;  margin:-1px;  padding:0; border:0; } 
input[type=checkbox].css-checkbox + label.css-label { padding-left:20px; height:15px;  display:inline-block; line-height:15px; background-repeat:no-repeat; background-position: 0 0; font-size:15px; vertical-align:middle; cursor:pointer; } 
input[type=checkbox].css-checkbox:checked + label.css-label { background-position: 0 -15px; }  .css-label{ background-image:url(http://csscheckbox.com/checkboxes/lite-x-red.png); }

<form>
<input id="demo_box_2" class="css-checkbox" type="checkbox" />
<label for="demo_box_2" name="demo_lbl_2" class="css-label">Selected Option</label>
<input id="demo_box_3" class="css-checkbox" type="checkbox" />
<label for="demo_box_3" name="demo_lbl_3" class="css-label">Selected Option</label>
</form>

尝试使用代码段

check the Fiddle link

Answer 2

更好地使用图片或尝试更改content: "X";

您可以将滴答声的unicode正确更改为任何其他符号：https://en.wikipedia.org/wiki/X_mark

input[type="checkbox"]{
    -webkit-appearance: initial;
    appearance: initial;
    background: gray;
    width: 40px;
    height: 40px;
    border: none;
    position: relative;
}
input[type="checkbox"]:checked {
    background: red;
}
input[type="checkbox"]:checked:after {
    /* Heres your symbol replacement */
    content: "X";
    color: #fff;
    /* The following positions my tick in the center, 
     * but you could just overlay the entire box
     * with a full after element with a background if you want to */
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    /*
     * If you want to fully change the check appearance, use the following:
     * content: " ";
     * width: 100%;
     * height: 100%;
     * background: blue;
     * top: 0;
     * left: 0;
     */
}

<input type="checkbox" />

选中复选框而不是勾选符号需要在HTML中使用X.

2 个答案: