How to make the radio button look like this design when selected/checked?
Newsha Nik
I am trying to style the radio button so that when one is selected, it looks like this (the left/first one):
This is the code I have so far:
@import url(https://fonts.googleapis.com/css?family=Lato:400,300);
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label span {
transform: scale(1.25);
}
input[type="radio"]:checked + label .red {
border: 2px solid #711313;
}
input[type="radio"]:checked + label .orange {
border: 2px solid #873a08;
}
input[type="radio"]:checked + label .yellow {
border: 2px solid #816102;
}
input[type="radio"]:checked + label .olive {
border: 2px solid #505a0b;
}
input[type="radio"]:checked + label .green {
border: 2px solid #0e4e1d;
}
input[type="radio"]:checked + label .teal {
border: 2px solid #003633;
}
input[type="radio"]:checked + label .blue {
border: 2px solid #103f62;
}
input[type="radio"]:checked + label .violet {
border: 2px solid #321a64;
}
input[type="radio"]:checked + label .purple {
border: 2px solid #501962;
}
input[type="radio"]:checked + label .pink {
border: 2px solid #851554;
}
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>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?
Veronika_2309
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>Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: Postgres getting error on NOT NULL constraint when updating by a defined value (i.e. "something")
- Next: monocart-reporter @owner tag will NOT attach to the test i'm running
Related
TOP Ranking
- 1
Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background
- 2
pump.io port in URL
- 3
Failed to listen on localhost:8000 (reason: Cannot assign requested address)
- 4
grouping by column variables and appending a new variable based on condition
- 5
Python Read Directory And Output to CSV
- 6
BigQuery - concatenate ignoring NULL
- 7
Angular 8. Unknown amount of http.get requests in array to call, must be sequential, what to use
- 8
Remove adjacent duplicates in linked list in C
- 9
Can a 32-bit antivirus program protect you from 64-bit threats
- 10
How to keep curl session alive between two php processes?
- 11
Limit number of characters in uitextview
- 12
Unable to use switch toggle for dark mode in material-ui
- 13
In C#, is there a way to create a List directly from an Array without copying?
- 14
Laravel getting value from another table using eloquent
- 15
Spring Boot JPA PostgreSQL Web App - Internal Authentication Error
- 16
MTKView Displaying Wide Gamut P3 Colorspace
- 17
Vector input in shiny R and then use it
- 18
Modify c# Windows Forms control library
- 19
SQL Server : are transaction locking table for other users?
- 20
When I click any button in my view page the form is submitted
- 21
Can you sort columns (horizontally) in Google Sheets?
Comments