CODEWITHSUNDEEP
cssreactjs
Stacy Areas
Stacy Areas

Reputation: 89

Trying to customize my radio button but nothing will change

I want to change the checked button to a different color. I don't have a checked attribute because I am map through an object to display value. I have tried targeting the input tag but nothing seems to work. I also want to be able to change color when hovering but I have had no luck with that either.

Here is my css:

.radio-btn {
    margin: 0 10px 10px 0;
    background-color: black;
}

.radio-btn:hover {
    background-color: black;
}

Here is the button file: 

import React from "react";

const EyewearPurchaseBtn = (props) => (
    <div>
        <form className="eyewear-purchase-form" onSubmit={props.handleSubmit}>
            <h3>Select Size</h3>

                    {
                        props.sizes.map( size => (
                            <div key={size} >
                            <input onChange={props.handleChange} className="radio-btn" type="radio" name="purchaseVal" value={size} />
                            <label className="eyewear-purchase-label">{size}</label><br/>   
                            </div>
                        ))
                    }

                    <button className="buy-now">Buy Now</button>    
                </form>
    </div>
);

export default EyewearPurchaseBtn;

Upvotes: 0

Views: 68

Answers (1)

Arkellys
Arkellys

Reputation: 7780

I don't know if it is exactly what your are looking for, but you can create fake radio button with css. Here is an example : 

input[type="radio"] {
  opacity: 0;
  z-index: 1;
}

label { position: relative; }

label:before, label:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
}

label:before {
  width: 15px;
  height: 15px;
  background-color: #3b3a39;
  left: -20px;
}

label:after {
  width: 7px;
  height: 7px;
  background-color: #f0e9e9;
  left: -16px;
  opacity: 0;
}

input[type="radio"]:checked + label:after { opacity: 1; }
input[type="radio"]:hover + label:before { background-color: #74706c; }
<div>
  <input type="radio" name="purchaseVal" checked />
  <label>Label 1</label>
</div>

<div>
  <input type="radio" name="purchaseVal" />
  <label>Label 2</label>
</div>

Upvotes: 1

Related Questions