Check mark “\2714” not working?

2019-06-02 04:39发布

I'm customizing a checkbox and it seems to be functioning but the unicode check isn't working... it's appearing as the text "\2714".
Here's my code:

.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条回答
男人必须洒脱
2楼-- · 2019-06-02 05:26

Have you tried using single quotes? Don't know if it will help, but in my css I'm using content: ' \2714'; and the check mark is showing fine, except in <=IE7 where I use a graphic instead.

查看更多
Summer. ? 凉城
3楼-- · 2019-06-02 05:33

You are missing a back slash \ in your markup.

It should be content: "\2714"; currently it is: content: "2714";

jsFiddle demo - the code you posted is correct - it just doesn't match up with that is being implemented on the page.

查看更多
Summer. ? 凉城
4楼-- · 2019-06-02 05:33

I don't know whether this will help in any ways. But was experimenting so thought you should see this:

fiddle

Using javascript

document.getElementById('test').innerHTML = "&#x2714;"

See if it helps. I read somewhere to use HTML entity :) some thing like ✔

查看更多
迷人小祖宗
5楼-- · 2019-06-02 05:35

The dev tools state that your css is:

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

Change it to (add a slash):

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

See attached screenshot:

The proof

查看更多
登录 后发表回答