I have implemented a unique CSS solution to showcase a five-star rating system on my website. The method I followed can be found at . While this technique works flawlessly in some sections of my website, it strangely fails in others. Could this be due to conflicting inherited properties? The key components of the method involve using the pseudo selector ":checked" and the general-sibling combinator selector (~).
Sample HTML Markup:
<div class="rating">
<input type="radio" name="rating" disabled="disabled" checked/>
<span id="hide"></span>
<input type="radio" name="rating" disabled="disabled"/>
<span></span>
<input type="radio" name="rating" disabled="disabled"/>
<span></span>
<input type="radio" name="rating" disabled="disabled"/>
<span></span>
<input type="radio" name="rating" disabled="disabled"/>
<span></span>
<input type="radio" name="rating" disabled="disabled"/>
<span></span>
</div>
CSS Style Rules:
.rating input[type="radio"] {
position:absolute;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
cursor:pointer;
width:17px;
}
.rating span {
width:24px;
height:15px;
line-height:15px;
padding:1px 22px 1px 0; /* 1px FireFox fix */
background:url(stars.png) no-repeat 3px -19px;
}
/* Adjust the style for the span immediately following the checked radio button */
.rating input[type="radio"]:checked + span {
background-position:3px -19px;
}
/* Return remaining stars to default background if not selected.
This rule takes precedence over the previous one due to its ordering. */
.rating input[type="radio"]:checked + span ~ span {
background-position:3px 1px;
}
In using this technique across different pages of my site, I've noticed that the last two CSS rules sometimes fail to apply. Upon testing, I discovered that removing the pseudo selector ":checked" correctly triggers these rules.
Any insights on how to resolve this issue would be greatly appreciated.
Thank you in advance