mercredi 20 mai 2015

CSS how to style the "content"/"background" attribute of a custom checkbox tick sign?

I have created a custom checkbox, all works fine. I would like to know if there's an option to style\manipulate the content or background attribute. I used a custom tick sign but it sits too much at the bottom, how can I raise it several pixels up?

JSfiddle

HTML:

        <input type='checkbox' value='valuable4' id="valuable4"/>
        <label for="valuable4">
            <span></span>
        </label>

CSS:

input[type=checkbox] {
    visibility: hidden;
}

label span
{
    height: 25px;
    width: 25px;
    position: absolute;

    left: 107px;
    cursor: pointer;
    border: 1px solid lightblue;
}
input[type=checkbox]:checked + label span
{
    content: url("http://ift.tt/1AeHLwk") no-repeat;
    height: 25px;
    width: 25px;
    cursor: pointer;
     border: 1px solid red;
}




Aucun commentaire:

Enregistrer un commentaire