- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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
Yes…a Codepen would be helpful.
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.
>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.
A thought, if all you are doing is swapping one image for another…why are you changing the position?
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