CODEWITHSUNDEEP
csshtmlmobilesasscompass-sass
Finglish
Finglish

Reputation: 9956

How to changing the x symbol in a foundation 4 custom checkbox

I am looking for a way to override the checked (x) style in a foundation for custom checkbox

Following the custom forms documentation I have successfully implemented a custom checkbox as follows:

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

This allows me to make css style changes to the look of the checkbox, but I can't find a way te effect the x itself.

Upvotes: 0

Views: 2065

Answers (3)

Mohamed Abdou
Mohamed Abdou

Reputation: 11

Try this code which would change the "x" to true sign

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

Upvotes: 1

Martin Turjak
Martin Turjak

Reputation: 21224

if you look in the CSS file used on the page you link to, you will find this part, that is styling the checked checkbox:

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

changing the content will change the symbol displayed. Hope this helps.

DEMO (provided in Andrey's comment)

Upvotes: 3

Abdul Malik
Abdul Malik

Reputation: 2642

change the value of content in your css 

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

to

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

or what ever you want

Upvotes: 3

Related Questions