css - 用 unicode 字符替换复选框

Question

我正在尝试用以下 unicode 字符替换未选中的复选框：☐ 或 ◻

我尝试通过将复选框的内容属性设置为 unicode 字符来做到这一点，但这似乎不起作用。

这是我尝试使用的 CSS 样式：

.question input[type='checkbox']{
    background:none;
    content:◻;
    cursor:pointer;
}

如何替换复选框或隐藏它并在其位置有一个 unicode 字符？

这是我正在尝试执行此操作的 JSFiddle：http: //jsfiddle.net/mNsAv/

Answer 1

示例：之前

http://jsfiddle.net/mNsAv/2/

.question input[type='checkbox'] + label:before {
    content:"◻";
}
.question input[type='checkbox']:checked + label:before {
    content:"✓";
}
.question input[type='checkbox'] {
    display:none;
}

Answer 2

HTML

<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
    <input type="checkbox" name="test"/>
    <span></span>
</label>    

CSS

.myCheckbox input {
    display: none;
}

.myCheckbox span:after {
    width: 20px;
    height: 20px;
    display: block;
     content:"◻";
}

.myCheckbox input:checked + span:after {
    content:"B"; /*In here u have to use another unicode sign for checked */
}

演示

Answer 3

我知道这个问题很老了。但我想在这里贡献我的代码：

• https://stackblitz.com/edit/unicode-selectors-vezpvs?file=Selector%2Fstyles.scss