- This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
Viewing 7 posts - 1 through 7 (of 7 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.
[http://jsfiddle.net/heZBT/1685/](http://jsfiddle.net/heZBT/1686/ “jsfidle”)
.radio-toolbar input[type=”radio”] {
}
.radio-toolbar label {
display:inline-block;
background-color:#ddd;
padding:4px 11px;
font-family:Arial;
font-size:16px;
}
.rot{
background-color:#ddd;
width:24px;
height:24px;
display:block;
}
.radio-toolbar input[type=”radio”]:checked + .rot {
display:none;
}
.radio-toolbar input[type=”radio”]:checked + .rot
the + selector is the next sibling so to solve your problem either use the ~ selector which is a general sibling one,
.radio-toolbar input[type=”radio”]:checked ~ .rot
or change your html to this
so now your div comes right after the radio button and your css works as is
Thanx #pixelgrid for your reply but still itz not working
when you change your code on jsfiddle you have to hit run again for changes to be applied. i tried it it works
I know i did dat :) might be i m on my mobile browser dats y itz not happening.
I will check on computer and let u know
Thanx again
yup tried on computer itz working but when i put both in different divs they dont work.
no it doesnt work this way. css can target only siblings or childred of siblings cant select a sibling of an elements parent with css.
what you could do is put the label and the input on different divs. not semantic but can help you achieve things with css only.
customize the label and hide entirelly the radio button. when the label is clicked the radio button will be checked no need for it displaying.
if all this is just too much you can always use javascript