Question 245821 in Html Question posted in
Some basic documentation can be found here.

Html – How to make the radio button look like this design when selected/checked?

I am trying to style the radio button so that when one is selected, it looks like this (the left/first one):

selected radio button

This is the code I have so far.

As you can see, in this codepen, when you select a radio button, this rule is added:

input[type="radio"]:checked + label span {
  transform: scale(1.25);
}

So the buttons will become bigger when they are selected. But I want them to keep their size and the background color covers a smaller circle than the rest. The part for adding border color is already there. How do I make this happen?

Tags:

2

Answers


  1. 0

    Can you please try these styles (I havent given the exact colors please use the below css and match the color)

    input[type="radio"] + label span {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 50%;
}

input[type="radio"] + label span::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  margin: 2px;
  border-radius: 50%;
}

input[type="radio"] + label span::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin: 4px;
  border-radius: 50%;
}

input[type="radio"]:checked + label span::before {
  background-color: #fff;
}

input[type="radio"]:checked + label span::after {
  background-color: #f00;
}

input[type="radio"]:checked + label span {
  transform: scale(1);
}

    Remove your entire css and give this and try hope this helps

    Login or Signup to reply.
  2. 0

    outline property might be useful here (add outline instead of border and change width and height when checked)
    By changing outline-offset and width, height you can adjust the amount of indentation

    @import url(https://fonts.googleapis.com/css?family=Lato:400,300);

input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label span {
  /* changed */
  width: 75%;
  height: 75%;
  padding: 2px;
  margin: 2px;
  outline-offset: 4px;
}
input[type="radio"]:checked + label .red {
  outline: 2px solid #711313;/* changed */
}
input[type="radio"]:checked + label .orange {
  outline: 2px solid #873a08;/* changed */
}
input[type="radio"]:checked + label .yellow {
  outline: 2px solid #816102;/* changed */
}
input[type="radio"]:checked + label .olive {
  outline: 2px solid #505a0b;/* changed */
}
input[type="radio"]:checked + label .green {
  outline: 2px solid #0e4e1d;/* changed */
}
input[type="radio"]:checked + label .teal {
  outline: 2px solid #003633;/* changed */
}
input[type="radio"]:checked + label .blue {
  outline: 2px solid #103f62;/* changed */
}
input[type="radio"]:checked + label .violet {
  outline: 2px solid #321a64;/* changed */
}
input[type="radio"]:checked + label .purple {
  outline: 2px solid #501962;/* changed */
}
input[type="radio"]:checked + label .pink {
  outline: 2px solid #851554;/* changed */
}


label {
  display: inline-block;
  width: 36px;
  height: 36px;
  margin-right: 10px;
  cursor: pointer;
}
label:hover span {
  transform: scale(1.25);
}
label span {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.2s ease-in-out;
  border-radius: 50%;
}
label span.red {
  background: #db2828;
}
label span.orange {
  background: #f2711c;
}
label span.yellow {
  background: #fbbd08;
}
label span.olive {
  background: #b5cc18;
}
label span.green {
  background: #21ba45;
}
label span.teal {
  background: #00b5ad;
}
label span.blue {
  background: #2185d0;
}
label span.violet {
  background: #6435c9;
}
label span.purple {
  background: #a333c8;
}
label span.pink {
  background: #e03997;
}
    <h1>Radio Color Picker</h1>
<input type="radio" name="color" id="red" value="red" />
<label for="red"><span class="red"></span></label>

<input type="radio" name="color" id="green" />
<label for="green"><span class="green"></span></label>

<input type="radio" name="color" id="yellow" />
<label for="yellow"><span class="yellow"></span></label>

<input type="radio" name="color" id="olive" />
<label for="olive"><span class="olive"></span></label>

<input type="radio" name="color" id="orange" />
<label for="orange"><span class="orange"></span></label>

<input type="radio" name="color" id="teal" />
<label for="teal"><span class="teal"></span></label>

<input type="radio" name="color" id="blue" />
<label for="blue"><span class="blue"></span></label>

<input type="radio" name="color" id="violet" />
<label for="violet"><span class="violet"></span></label>

<input type="radio" name="color" id="purple" />
<label for="purple"><span class="purple"></span></label>

<input type="radio" name="color" id="pink" />
<label for="pink"><span class="pink"></span></label>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search