如何更改基础 4 自定义复选框中的 x 符号答案

【问题标题】：How to changing the x symbol in a foundation 4 custom checkbox如何更改基础 4 自定义复选框中的 x 符号
【发布时间】：2013-06-28 11:17:55
【问题描述】：

我正在寻找一种方法来覆盖自定义复选框基础中的选中 (x) 样式

按照自定义forms documentation我已经成功实现了自定义复选框如下：

<form class="custom">
    <label for="checkbox1">
        <input type="checkbox" id="checkbox1" CHECKED />
        <span class="custom checkbox checked"></span>Label for checkbox 1
    </label>
</form>

这允许我对复选框的外观进行 css 样式更改，但我找不到影响 x 本身的方法。

【问题讨论】：

标签： css html mobile sass compass-sass

【解决方案1】：

试试这个将“x”更改为真符号的代码

form.custom .custom.checkbox.checked:before {
content: "\2714";}

【讨论】：

【解决方案2】：

如果您查看链接到的页面上使用的CSS file，您会发现这部分，即为选中的复选框设置样式：

form.custom .custom.checkbox.checked:before {
    content: "\00d7";
    color: #222222;
    position: absolute;
    top: -50%;
    left: 50%;
    margin-top: 4px;
    margin-left: -5px;
}

更改内容将更改显示的符号。希望这会有所帮助。

DEMO（在安德烈的评论中提供）

【讨论】：

感谢@Andrey'lolmaus'Mikhaylov，我在答案中直接添加了指向您的演示的链接。

【解决方案3】：

更改 CSS 中内容的值

form.custom .custom.checkbox.checked:before {
content: "×00d7";}

到

 form.custom .custom.checkbox.checked:before {
    content: "*";}

或者你想要什么

【讨论】：