Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Custom Check Boxes

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #45454
    travist6983
    Member

    Hey Everybody – I am trying to use custom Check boxes on a quiz i have created. I have followed a few tutorials to the T and nothing is working for the “checked” option.

    Here is my CSS does anything look off too you?

    input[type=”checkbox”] {display:none;}
    input[type=”checkbox”] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background: url(../img/unchecked.png) left top no-repeat;
    cursor:pointer;
    }
    input[type=”checkbox”]:checked + label span {
    background:url(../img/checked.png) top middle no-repeat;
    }

    If it will help i can put this online if it will help so you could see it live.

    Thanks,
    Travis

    #138344
    Paulie_D
    Member

    Yes…a Codepen would be helpful.

    #138348
    travist6983
    Member

    It is a little complicated to use codepen…

    http://travisjterry.com/Quiz/VideoPage.html

    The checkboxes are be created by JS so that might be my issue?

    If you click start and next until you get to question 4 that question has the checkboxes on it.

    #138356
    Paulie_D
    Member

    >The checkboxes are be created by JS so that might be my issue?

    Seems possible but unlikely.

    If the checkboxes are correctly inserted in the DOM then the CSS should work.

    #138358
    Paulie_D
    Member

    A thought, if all you are doing is swapping one image for another…why are you changing the position?

    #138366
    travist6983
    Member

    That was part of something i was trying i found on the net it shouldn’t be switching the position anymore… It should be just switching the image. Do you think it could work better as a sprite? all the example i found they were sprits

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.