1

我正在自定义一个复选框，它似乎正在运行，但 unicode 检查不起作用......它显示为文本“\2714”。
这是我的代码：

.edd_price_option_1762 {
    -webkit-appearance: none;
    background-color: #fafafa;
    border: 3px solid #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
    padding: 9px;
    border-radius: 0px;
    display: inline-block;
    position: relative;
    top: 8px;
}
.edd_price_option_1762:active, .edd_price_option_1762:checked:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
}
.edd_price_option_1762:checked {
    background-color: #e9ecee;
    border: 3px solid #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
    color: #99a1a7;
}
.edd_price_option_1762:checked:after {
    content:"\2714";
    font-size: 19px;
    position: absolute;
    top: 0px;
    left: 3px;
    color: #49a6db;
}
4

4 回答 4

3

您的标记中缺少反斜杠\。

目前应该content: "\2714";是：content: "2714";

jsFiddle 演示- 您发布的代码是正确的 - 它与页面上正在实现的代码不匹配。

于 2013-09-29T19:17:28.960 回答
2

开发工具指出您的 css 是：

.edd_price_option_1762:checked:after {
    content: "2714 ";
    font-size: 19px;
    position: absolute;
    top: 0px;
    left: 3px;
    color: #49a6db;
}

将其更改为（添加斜线）：

.edd_price_option_1762:checked:after {
    content: "\2714";
    font-size: 19px;
    position: absolute;
    top: 0px;
    left: 3px;
    color: #49a6db;
}

见附件截图：

证据

于 2013-09-29T19:15:22.013 回答
0

我不知道这是否会有所帮助。但是正在试验所以认为你应该看到这个：

小提琴

使用 javascript

document.getElementById('test').innerHTML = "✔"

看看有没有帮助。我在某处读到使用 HTML 实体 :) 类似✔

于 2013-09-29T19:50:08.893 回答
-2

您是否尝试过使用单引号？不知道它是否会有所帮助，但在我的 css 中我使用的是 content: ' \2714'; 并且复选标记显示正常，除了在 <=IE7 中我使用图形代替。

于 2014-01-14T19:13:46.103 回答