Styling Radio Button

Styling input radio buttons

You can't go backwards in css, thats why your code doesn't work

You need to add a span inside the label after your input and you can style it when the radio is checked

see code snippet:

.radio input[type='radio'] {

  display: none;

  /*removes original button*/

}

.radio label:before {

  /*styles outer circle*/

  content: " ";

  display: inline-block;

  position: relative;

  top: 5px;

  margin: 0 5px 0 0;

  width: 20px;

  height: 20px;

  border-radius: 11px;

  border: 2px solid orange;

  background-color: transparent;

}

.radio label {

  position: relative;

}

.radio label input[type='radio']:checked+span {

  /*styles inside circle*/

  border-radius: 11px;

  width: 12px;

  height: 12px;

  position: absolute;

  top: 1px;

  left: 6px;

  display: block;

  background-color: blue;

}

<div class="radio">

  <label><input type="radio" name="gender" value="male"> Male<span></span></label>

  <label><input type="radio" name="gender" value="female"> Female<span></span></label>

  <label><input type="radio" name="gender" value="other"> Other<span></span></label>

</div>

Styling radio button

The HTML markup:

<ul>
    <li>
        <label>
            <input class="wpProQuiz_questionInput" type="radio" name="question_1_2" value="3" />
            <span class="graphical-radio"></span>
            Non riesco a lasciarlo solo
        </label>
    </li>
</ul>

The CSS:

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

.graphical-radio {
    background: gray;
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 100%;
}

input[type="radio"]:checked + .graphical-radio {
    background: red;
}

The magic is with :checked selector, so you can style the graphical-radio as you want.

jsFiddle Demo.

How to style radio input button (ReactJS)?

You can't change the radio button color directly, You need to build your own and customize it as you want.

or you can use filter with hue-rotate() but it's not supported on Internet Explorer have a look here for more info

Edit
There is a better way to do this as @Servesh Chaturvedi mentioned using accent-color: red;

#one{
  filter: hue-rotate(150deg);
}

#two{
  accent-color:red;
}

 <input type="radio" id="one" name="radio" value="first">
<label for="html">First</label><br>

 <input type="radio" id="two" name="radio" value="second">
<label for="html">Second</label><br>
 

Radio button style changes when clicked with React Hooks

One option is a custom Radio element that allows you to represent your radio buttons however you like. In this example we use two emoji, but you could use images, or SVG if you wanted.

function Radio({ checked, onClick, children, on = "✔️", off = "quot; }) {
  return <div className="radio" onClick={onClick}>
    {checked ? on : off } {children}
  </div>
}

We can use the Radio elements in our app like this.

function App() {
  const [radio, selectRadio] =
    useRadio(["paystack", "paypal", "wallet"], "paystack")
  return <div>
    <Radio checked={radio == "paystack"} onClick={selectRadio("paystack")}>
      Paystack (Debit/Credit Card)
    </Radio>
    {/* more radio options ...*/}
  </div>
}

This is made possible by writing useRadio which encodes the radio group logic nicely in a custom hook.

function useRadio(validStates, initState) {
  const [state, setState] = React.useState(initState)
  return [
    state,
    value => event =>
      validStates.includes(value)
        ? setState(value)
        : console.error(`invalid option: ${value}`)
  ]
}

Here's a minimal, verifiable example. Run it below and click some radio buttons to see the application state change.

function App() {
  const [radio, selectRadio] = useRadio(["paystack", "paypal", "wallet"], "paystack")
  return <div>
    <Radio checked={radio == "paystack"} onClick={selectRadio("paystack")}>
      Paystack (Debit/Credit Card)
    </Radio>
    <Radio checked={radio == "wallet"} onClick={selectRadio("wallet")}>
      Pay with Wallet
    </Radio>
    <Radio checked={radio == "paypal"} onClick={selectRadio("paypal")}>
      PayPal
    </Radio>
    <pre>{JSON.stringify({paymentOption: radio}, null, 2)}</pre>
  </div>
}

function Radio({ checked, onClick, children, on = "✔️", off = " }) {
  return <div className="radio" onClick={onClick}>
    {checked ? on : off } {children}
  </div>
}

function useRadio(validStates, initState) {
  const [state, setState] = React.useState(initState)
  return [
    state,
    value => event =>
      validStates.includes(value)
        ? setState(value)
        : console.error(`invalid option: ${value}`)
  ]
}

ReactDOM.render(<App/>, document.querySelector("#app"))

.radio { cursor: pointer; }
pre { padding: 0.5rem; background-color: #ffc; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

How can I make a radio button RTL in Tailwind CSS?

Make just one div as a parent of the input field and the label. Then give the parent div these classes: flex flex-row-reverse items-center

<div className="form-check flex flex-row-reverse items-center">
  <input
    className="form-check-input appearance-none rounded-full h-7 w-7 border-4 border-[#5F6368] bg-[#C4C4C4] hover:shadow-lg hover:shadow-[#5F6368] hover:border-[#3B52B5] checked:bg-[#7EABFF] checked:border-[#3B52B5] focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-5 cursor-pointer"
    type="radio"
    name="flexRadioDefault"
    id="flexRadioDefault1"
  />
  <label
    className="form-check-label text-3xl text-right font-bold text-gray-800"
    htmlFor="flexRadioDefault1"
  >
    الخيار 1
  </label>
</div>

---

Related Topics