用unicode字符替换复选框

Question

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

我尝试通过将复选框的content属性设置为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 */
}

DEMO

Answer 3

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

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