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;
}
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.
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.
I don't know whether this will help in any ways. But was experimenting so thought you should see this:
fiddle
Using javascript
See if it helps. I read somewhere to use HTML entity :) some thing like ✔
The dev tools state that your css is:
Change it to (add a slash):
See attached screenshot: