CODEWITHSUNDEEP
htmlcssreactjs
CraZyDroiD
CraZyDroiD

Reputation: 7105

Radio button click not working when css applied

I'm trying to implement a star rating system to my react project and i'm facing some strange issue. I'm following the following article.

http://code.stephenmorley.org/html-and-css/star-rating-widget/#download

I have done everything mentioned in the article and it worked correctly but the issue is, i cannot select a star(radio button) with the css applied. I have tried it without applying the css and it's working correctly then. I have given a onClick to one of the radio buttons without the css, and it's working then. But as soon as i apply the css it will not work (Click event not triggered.) How can i solve this?

class StarRating extends Component {
    constructor() {
        super();
    }

    radio(){

        alert("sgssg");

    }

    render() {

        return (

            <div>
                <span className="starRating" >
                    <input id="rating5" type="radio" name="rating" value="5" onClick={this.radio.bind(this)}/>
                    <label for="rating5">5</label>
                    <input id="rating4" type="radio" name="rating" value="4"/>
                    <label for="rating4">4</label>
                    <input id="rating3" type="radio" name="rating" value="3"/>
                    <label for="rating3">3</label>
                    <input id="rating2" type="radio" name="rating" value="2"/>
                    <label for="rating2">2</label>
                    <input id="rating1" type="radio" name="rating" value="1"/>
                    <label for="rating1">1</label>
                </span>
            </div>


    );
    }
    }

    export default StarRating;

CSS

.starRating:not(old) {
    display: inline-block;
    width: 7.5em;
    height: 1.5em;
    overflow: hidden;
    vertical-align: bottom;
}

.starRating:not(old) > input {
    margin-right: -100%;
    opacity: 0;
}

.starRating:not(old) > label {
    display: block;
    float: right;
    position: relative;
    background: url('../Images/star-off.svg');
    background-size: contain;
}

.starRating:not(old) > label:before {
    content: '';
    display: block;
    width: 1.5em;
    height: 1.5em;
    background: url('../Images/star-on.svg');
    background-size: contain;
    opacity: 0;
    transition: opacity 0.2s linear;
}

.starRating:not(old) > label:hover:before,
.starRating:not(old) > label:hover ~ label:before,
.starRating:not(:hover) > :checked ~ label:before {
    opacity: 1;
}

When i remove the css class starRating it shows normal radio buttons but it's working. With that class it stops working.

Upvotes: 0

Views: 156

Answers (2)

IMOBAMA
IMOBAMA

Reputation: 1927

I made a jsbin

https://jsbin.com/wogotuzubo/edit?html,css,js,console,output

There is a problem in your css which made the radioButton dissapear because of opacity:0; Technically its working. But you cannot see the button so you cant click it so no alerts.

So take a look at your css and try to fix it.

javascript is ok.

Upvotes: 0

blackmiaool
blackmiaool

Reputation: 5344

You should contorl your radios with js.

Found a tutorial for u : http://react.tips/radio-buttons-in-reactjs/

Upvotes: 1

Related Questions