CODEWITHSUNDEEP
cssgoogle-chromecss-selectors
Combine
Combine

Reputation: 4224

CSS Sibling selector malfunctioning under Chrome

I'm making a vote system and here's my code. It works fine under Firefox, but it's not working properly under Chrome and I don't know what's the problem with it. Under Firefox when you hover over each square the previous are selected. Under Chrome to select the first one you need to point over the second square and so on. One more thing, if you click over the fifth box despite its not colored the link is working.

http://jsfiddle.net/SV8Dh/

<div id="vote-stars">

    <input type="radio" name="stars" id="5" class="but" value="5"  />
    <label for="5">5</label>

    <input type="radio" name="stars" id="4" class="but" value="4"  />
    <label for="4">4</label>

    <input type="radio" name="stars" id="3" class="but" value="3"  />
    <label for="3">3</label>

    <input type="radio" name="stars" id="2" class="but" value="2"  />
    <label for="2">2</label>

    <input type="radio" name="stars" id="1" class="but" value="1"  />
    <label for="1">1</label>              

</div>

Some css:

input[type="radio"]{
    display:none;
}

.but + label
{
    width: 23px;
    height: 23px;
    background-color:gray;
    display:inline-block;
    padding: 0 0 0 0px;
    float: left;
    border:1px;
    border-style: groove;
    border-color: yellow;
}

.but:hover + label,
.but:hover ~ .but + label,
.but:hover ~ label {
    width: 23px;
    height: 23px;
    background-color:green;
    display:inline-block;
    padding: 0 0 0 0px;
    margin: 0px;

}
.but:checked + label,
.but:checked ~ .but + label,
.but:checked ~ label {
    width: 23px;
    height: 23px;
    background-color:green;
    display:inline-block;
    padding: 0 0 0 0px;
    margin: 0px;
    border:2px;
    border-style: groove;
    border-color: green;
}

Cheers

Upvotes: 1

Views: 131

Answers (2)

Tauseef Ahmed
Tauseef Ahmed

Reputation: 21

Or you can simple change Radio Button to visibility:hidden;

Upvotes: 0

Hashem Qolami
Hashem Qolami

Reputation: 99564

Seems it is caused by changing the display type of the radio buttons to none and Chrome has no idea to trigger :hover for the hidden element.

As an alternative, you can use :hover pseudo-class for the labels instead.

label:hover,
label:hover ~ label {
    width: 23px;
    height: 23px;
    background-color: green;
    display: inline-block;
    padding: 0;
    margin: 0;
}

Working Demo.

Upvotes: 2

Related Questions