Radio button click not working when css applied

Question

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.

blackmiaool · Accepted Answer · 2017-03-13 11:26:23Z

1

You should contorl your radios with js.

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

answered Mar 13, 2017 at 11:26

blackmiaool

5,3942 gold badges24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

IMOBAMA · Accepted Answer · 2017-03-13 12:52:55Z

0

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.

answered Mar 13, 2017 at 12:52

IMOBAMA

1,9373 gold badges15 silver badges13 bronze badges

Collectives™ on Stack Overflow

Radio button click not working when css applied

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related