Related
I want my form layout to look like the picture below:
This is what I currently have:
label {
display: inline-block;
border: 1px solid red;
}
input {
display: inline-block;
width: 28%;
margin-top: 1.5em;
margin-left: 2em;
border: 1px solid greenyellow;
}
<label for="First_Name"> First Name: </label>
<input type="text" id="First_Name">
<label for="Last_Name"> Last Name: </label>
<input type="text" id="Last_Name">
This is my output:
There are many ways to achieve this. Here is one possibility:
wrap each pair of label and input in a div (or similar)
use flexbox to get them to stack vertically
Everything else seems to be just a matter of inspecting the reference regarding the used colors and sizes, which you can do by using your Browser's Inspector (or looking at the source code). Alternatively, bring the provided image into an image editing program and check the colors there.
Here is a rough approximation based on the approach outlined above:
body {
background-color: #f6f7f5;
}
fieldset {
display: flex; /* use flexbox for content */
justify-content: center; /* center items horizontally */
border: none; /* remove default fieldset border */
}
.input {
flex-grow: 1; /* take up free space within parent */
flex-basis: 50%; /* width (before growing/shrinking) */
display: flex; /* use flexbox for content */
flex-direction: column; /* arrange content vertically */
margin: 1rem;
}
label {
padding: 0.5rem 0;
font-family: sans-serif;
font-size: 11pt;
color: #5b5b60;
}
input {
padding: 0.5rem;
color: #9d9d9d;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
box-shadow:inset 0 1px 1px #eee;
}
.required label::after {
content: "*";
}
.required input {
border: 1px solid #a94442;
}
<fieldset>
<div class="input required">
<label for="First_Name">First Name:</label>
<input type="text" id="First_Name">
</div>
<div class="input">
<label for="Last_Name">Last Name:</label>
<input type="text" id="Last_Name">
<div>
</fieldset>
Try this code
label {
display: block;
}
input {
display: block;
width: 100%;
border: 1px solid greenyellow;
padding: 4px
}
.overflow {
width: 100%;
overflow: hidden
}
.pull-left {
width: calc(50% - 20px);
float: left;
margin: 10px
}
<div class="overflow">
<div class="pull-left">
<label for="First_Name"> First Name: </label>
<input type="text" id="First_Name">
</div>
<div class="pull-left">
<label for="Last_Name"> Last Name: </label>
<input type="text" id="Last_Name">
</div>
</div>
I want to design following material design input form using css and bootstrap. Following code is I am currently using. But it doesn't provide exact result I want.
Code Pen Link : View Source Code Here
HTML CODE :
<div class="container">
<h2>Google Material Design in CSS3<small>Inputs</small></h2>
<form>
<div class="group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>
<div class="group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Email</label>
</div>
</form>
<p class="footer">
a tutorial by scotch.io
</p>
</div>
But I want this design :
CSS Only solution; use combination of sibling selector ~ on the label and :valid pseudo selector on the input.
body {
margin: 10px;
}
.form-group>label {
bottom: 34px;
left: 15px;
position: relative;
background-color: white;
padding: 0px 5px 0px 5px;
font-size: 1.1em;
transition: 0.2s;
pointer-events: none;
}
.form-control:focus~label {
bottom: 55px;
}
.form-control:valid~label {
bottom: 55px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-6">
<br>
<div class="form-group">
<input type="text" class="form-control" id="usr" required>
<label for="usr">Name</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="password" required>
<label for="usr">Password</label>
</div>
</div>
</div>
</div>
Since you've tagged Bootstrap 4, I'm assuming you wanted the solution with regards to that framework.
Setup a default form-group, label, and input markup like this;
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
Then add this css, what this would do is
position label relative to its container (form-group)
then we specified the top and left positions so that it would land
on top of the input field
I added a white background and padding to the label so that it would have a box around the label.
.form-group > label {
top: 18px;
left: 6px;
position: relative;
background-color: white;
padding: 0px 5px 0px 5px;
font-size: 0.9em;
}
Here's a fiddle with that code on bootstrap 4;
http://jsfiddle.net/rw29jot4/
For the animation, check this fiddle, we need to utilize click events and move the position of the label;
Updated code with animation;
http://jsfiddle.net/sedvo037/
EDIT: Please see my answer below which uses only CSS.
Try with this code.
HTML:
<div class="main_div">
<div class="group">
<input type="text" required="required"/>
<label>Name</label>
</div>
</div>
CSS:
.main_div{
padding: 30px;
}
input,
textarea {
background: none;
color: #c6c6c6;
font-size: 18px;
padding: 10px 10px 10px 15px;
display: block;
width: 320px;
border: none;
border-radius: 10px;
border: 1px solid #c6c6c6;
}
input:hover{
border: 3px solid black;
}
input:focus,
textarea:focus {
outline: none;
border: 3px solid black;
}
input:focus ~ label, input:valid ~ label,
textarea:focus ~ label,
textarea:valid ~ label {
top: -5px;
font-size: 12px;
color: #000;
left: 11px;
}
input:focus ~ .bar:before,
textarea:focus ~ .bar:before {
width: 320px;
}
input[type="password"] {
letter-spacing: 0.3em;
}
.group{
position: relative;
}
label {
color: #c6c6c6;
font-size: 16px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 15px;
top: 12px;
transition: 300ms ease all;
background-color: #fff;
padding: 0 2px;
}
I mean, a radio button itself consists of a round shape and a dot at the center (when the button is selected). What I want to change is the color of both. Can this be done using CSS?
A quick fix would be to overlay the radio button input style using :after, however it's probably a better practice to create your own custom toolkit.
input[type='radio']:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: #d1d3d1;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
}
input[type='radio']:checked:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: #ffa500;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
}
<input type='radio' name="gender"/>
<input type='radio' name="gender"/>
A radio button is a native element specific to each OS/browser. There is no way to change its color/style, unless you want to implement custom images or use a custom Javascript library which includes images (e.g. this - cached link)
As Fred mentioned, there is no way to natively style radio buttons in regards to color, size, etcc. But you can use CSS Pseudo elements to setup an impostor of any given radio button, and style it. Touching on what JamieD said, on how we can use the :after Pseudo element, you can use both :before and :after to achieve a desirable look.
Benefits of this approach:
Style your radio button and also Include a label for content.
Change the outer rim color and/or checked circle to any color you like.
Give it a transparent look with modifications to background color property and/or optional use of the opacity property.
Scale the size of your radio button.
Add various drop shadow properties such as CSS drop shadow inset where needed.
Blend this simple CSS/HTML trick into various Grid systems, such as Bootstrap 3.3.6, so it matches the rest of your Bootstrap components visually.
Explanation of short demo below:
Set up a relative in-line block for each radio button
Hide the native radio button sense there is no way to style it directly.
Style and align the label
Rebuilding CSS content on the :before Pseudo-element to do 2 things - style the outer rim of the radio button and set element to appear first (left of label content). You can learn basic steps on Pseudo-elements here - http://www.w3schools.com/css/css_pseudo_elements.asp
If the radio button is checked, request for label to display CSS content (the styled dot in the radio button) afterwards.
The HTML
<div class="radio-item">
<input type="radio" id="ritema" name="ritem" value="ropt1">
<label for="ritema">Option 1</label>
</div>
<div class="radio-item">
<input type="radio" id="ritemb" name="ritem" value="ropt2">
<label for="ritemb">Option 2</label>
</div>
The CSS
.radio-item {
display: inline-block;
position: relative;
padding: 0 6px;
margin: 10px 0 0;
}
.radio-item input[type='radio'] {
display: none;
}
.radio-item label {
color: #666;
font-weight: normal;
}
.radio-item label:before {
content: " ";
display: inline-block;
position: relative;
top: 5px;
margin: 0 5px 0 0;
width: 20px;
height: 20px;
border-radius: 11px;
border: 2px solid #004c97;
background-color: transparent;
}
.radio-item input[type=radio]:checked + label:after {
border-radius: 11px;
width: 12px;
height: 12px;
position: absolute;
top: 9px;
left: 10px;
content: " ";
display: block;
background: #004c97;
}
A short demo to see it in action
In conclusion, no JavaScript, images or batteries required. Pure CSS.
You can use the CSS accent-color property to change the color.
input[type='radio'] {
accent-color: #232323;
}
It works with Chrome/Edge 93+, Firefox 92+, and Safari 15.4+ (Browser support info from caniuse.)
You can achieve customized radio buttons in two pure CSS ways
Via removing standard appearance using CSS appearance and applying custom appearance. Unfortunately this was doesn't work in IE. Demo:
input[type="radio"] {
/* remove standard background appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* create custom radiobutton appearance */
display: inline-block;
width: 25px;
height: 25px;
padding: 6px;
/* background-color only for content */
background-clip: content-box;
border: 2px solid #bbbbbb;
background-color: #e7e6e7;
border-radius: 50%;
}
/* appearance for checked radiobutton */
input[type="radio"]:checked {
background-color: #93e026;
}
/* optional styles, I'm using this for centering radiobuttons */
.flex {
display: flex;
align-items: center;
}
<div class="flex">
<input type="radio" name="radio" id="radio1" />
<label for="radio1">RadioButton1</label>
</div>
<div class="flex">
<input type="radio" name="radio" id="radio2" />
<label for="radio2">RadioButton2</label>
</div>
<div class="flex">
<input type="radio" name="radio" id="radio3" />
<label for="radio3">RadioButton3</label>
</div>
Via hiding radiobutton and setting custom radiobutton appearance to label's pseudoselector. By the way no need for absolute positioning here (I see absolute positioning in most demos). Demo:
*,
*:before,
*:after {
box-sizing: border-box;
}
input[type="radio"] {
display: none;
}
input[type="radio"]+label:before {
content: "";
/* create custom radiobutton appearance */
display: inline-block;
width: 25px;
height: 25px;
padding: 6px;
margin-right: 3px;
/* background-color only for content */
background-clip: content-box;
border: 2px solid #bbbbbb;
background-color: #e7e6e7;
border-radius: 50%;
}
/* appearance for checked radiobutton */
input[type="radio"]:checked + label:before {
background-color: #93e026;
}
/* optional styles, I'm using this for centering radiobuttons */
label {
display: flex;
align-items: center;
}
<input type="radio" name="radio" id="radio1" />
<label for="radio1">RadioButton1</label>
<input type="radio" name="radio" id="radio2" />
<label for="radio2">RadioButton2</label>
<input type="radio" name="radio" id="radio3" />
<label for="radio3">RadioButton3</label>
Only if you are targeting webkit-based browsers (Chrome and Safari, maybe you are developing a Chrome WebApp, who knows...), you can use the following:
input[type='radio'] {
-webkit-appearance: none;
}
And then style it as if it were a simple HTML element, for example applying a background image.
Use input[type='radio']:active for when the input is selected, to provide the alternate graphics
Update: As of 2018 you can add the following to support multiple browser vendors:
input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
Try something like this:
#yes{
border:2px solid white;
box-shadow:0 0 0 1px #392;
appearance:none;
border-radius:50%;
width:12px;
height:12px;
background-color:#fff;
transition:all ease-in 0.2s;
}
#yes:checked{
background-color:#392;
}
#no{
border:2px solid white;
box-shadow:0 0 0 1px #932;
appearance:none;
border-radius:50%;
width:12px;
height:12px;
background-color:#fff;
transition:all ease-in 0.2s;
}
#no:checked{
background-color:#932;
}
<input id="yes" type="radio" name="s"><label for="yes">Yes</label></br>
<input id="no" type="radio" name="s"><label for="no">No</label>
There is less of code, it looks better and you don't need to play with :before , :after and position to reach the effect.
you can use the checkbox hack as explained in css tricks
http://css-tricks.com/the-checkbox-hack/
working example of radio button:
http://codepen.io/Angelata/pen/Eypnq
input[type=radio]:checked ~ .check {}
input[type=radio]:checked ~ .check .inside{}
Works in IE9+, Firefox 3.5+, Safari 1.3+, Opera 6+, Chrome anything.
simple cross browser custom radio button example for you
.checkbox input{
display: none;
}
.checkbox input:checked + label{
color: #16B67F;
}
.checkbox input:checked + label i{
background-image: url('http://kuzroman.com/images/jswiddler/radio-button.svg');
}
.checkbox label i{
width: 15px;
height: 15px;
display: inline-block;
background: #fff url('http://kuzroman.com/images/jswiddler/circle.svg') no-repeat 50%;
background-size: 12px;
position: relative;
top: 1px;
left: -2px;
}
<div class="checkbox">
<input type="radio" name="sort" value="popularity" id="sort1">
<label for="sort1">
<i></i>
<span>first</span>
</label>
<input type="radio" name="sort" value="price" id="sort2">
<label for="sort2">
<i></i>
<span>second</span>
</label>
</div>
https://jsfiddle.net/kuzroman/ae1b34ay/
Well to create extra elements we can use :after, :before (so we don’t have to change the HTML that much). Then for radio buttons and checkboxes we can use :checked. There are a few other pseudo elements we can use as well (such as :hover). Using a mixture of these we can create some pretty cool custom forms. check this
I builded another fork of #klewis' code sample to demonstrate some playing with pure css and gradients by using :before/:after pseudo elements and a hidden radio input button.
HTML:
sample radio buttons:
<div style="background:lightgrey;">
<span class="radio-item">
<input type="radio" id="ritema" name="ritem" class="true" value="ropt1" checked="checked">
<label for="ritema">True</label>
</span>
<span class="radio-item">
<input type="radio" id="ritemb" name="ritem" class="false" value="ropt2">
<label for="ritemb">False</label>
</span>
</div>
:
CSS:
.radio-item input[type='radio'] {
visibility: hidden;
width: 20px;
height: 20px;
margin: 0 5px 0 5px;
padding: 0;
}
.radio-item input[type=radio]:before {
position: relative;
margin: 4px -25px -4px 0;
display: inline-block;
visibility: visible;
width: 20px;
height: 20px;
border-radius: 10px;
border: 2px inset rgba(150,150,150,0.75);
background: radial-gradient(ellipse at top left, rgb(255,255,255) 0%, rgb(250,250,250) 5%, rgb(230,230,230) 95%, rgb(225,225,225) 100%);
content: "";
}
.radio-item input[type=radio]:checked:after {
position: relative;
top: 0;
left: 9px;
display: inline-block;
visibility: visible;
border-radius: 6px;
width: 12px;
height: 12px;
background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
content: "";
}
.radio-item input[type=radio].true:checked:after {
background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
}
.radio-item input[type=radio].false:checked:after {
background: radial-gradient(ellipse at top left, rgb(255,225,200) 0%, rgb(250,200,150) 5%, rgb(200,25,0) 95%, rgb(100,25,0) 100%);
}
.radio-item label {
display: inline-block;
height: 25px;
line-height: 25px;
margin: 0;
padding: 0;
}
preview:
https://www.codeply.com/p/y47T4ylfib
For those who prefer to start development with a minimal example, here's a simple custom radio button that doesn't depend on label:
[type="radio"] {
visibility: hidden; /* hide default radio button */
/* you may need to adjust margin here, too */
}
[type="radio"]::before { /* create pseudoelement */
border: 2px solid gray; /* thickness, style, color */
height: .9em; /* height adjusts with font */
width: .9em; /* width adjusts with font */
border-radius: 50%; /* make it round */
display: block; /* or flex or inline-block */
content: " "; /* won't display without this */
cursor: pointer; /* appears clickable to mouse users */
visibility: visible; /* reverse the 'hidden' above */
}
[type="radio"]:checked::before { /* selected */
/* add middle dot when selected */
/* slightly bigger second value makes it smooth */
/* even more (e.g., 20% 50%) would make it fuzzy */
background: radial-gradient(gray 36%, transparent 38%);
}
<br>
<input type="radio" name="example" id="one" value="one">
<label for="one">one</label>
<br>
<br>
<input type="radio" name="example" id="two" value="two">
<label for="two">two</label>
Try this css with transition:
Demo
$DarkBrown: #292321;
$Orange: #CC3300;
div {
margin:0 0 0.75em 0;
}
input[type="radio"] {
display:none;
}
input[type="radio"] + label {
color: $DarkBrown;
font-family:Arial, sans-serif;
font-size:14px;
}
input[type="radio"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
cursor:pointer;
-moz-border-radius: 50%;
border-radius: 50%;
}
input[type="radio"] + label span {
background-color:$DarkBrown;
}
input[type="radio"]:checked + label span{
background-color:$Orange;
}
input[type="radio"] + label span,
input[type="radio"]:checked + label span {
-webkit-transition:background-color 0.4s linear;
-o-transition:background-color 0.4s linear;
-moz-transition:background-color 0.4s linear;
transition:background-color 0.4s linear;
}
Html :
<div>
<input type="radio" id="radio01" name="radio" />
<label for="radio01"><span></span>Radio Button 1</label>
</div>
<div>
<input type="radio" id="radio02" name="radio" />
<label for="radio02"><span></span>Radio Button 2</label>
</div>
Simple , you can be used accent-color
View page source
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input[type=radio] {
accent-color: red;
}
</style>
</head>
<body>
<label for="css">Are you like to css</label>
<input type="radio" id="css" value="css">
</body>
</html>
You should use the accent-color CSS property, which sets the accent color for user-interface controls such as inputs (radio buttons, checkboxes...) or progress bars and it's supported for most modern browsers.
input {
accent-color: red;
}
document.querySelector("input[name=accent-color]").addEventListener("input", () => {
document.documentElement.style.setProperty("--accent-color", event.target.value);
});
:root {
--accent-color: red;
}
input,
progress {
accent-color: var(--accent-color);
}
/* Other styles */
label {
display: flex;
align-items: center;
gap: .625rem;
margin-bottom: .625rem;
}
label:first-child {
font-size: 1.15rem;
font-weight: bold;
}
input {
flex: 0 0 auto;
height: 1.25rem;
width: 1.25rem;
}
input[type="color"] {
width: 3rem;
}
input[type="range"] {
width: 12.5rem;
}
<label>Change the accent color<input name="accent-color" type="color" value="#ff0000"></input></label><br>
<label><input name="radio" type="radio" checked></input>Radio button</label>
<label><input name="radio" type="radio"></input>Another radio button</label>
<label><input name="check" type="checkbox" checked></input>Checkbox</label>
<label><input name="range" type="range"></input>Range input</label>
<label><progress value="50" max="100"></progress>Progress bar</label>
This is not possible by native CSS. You'll have to use background images and some javascript tricks.
As other said, there's no way to achieve this in all browser, so best way of doing so crossbrowser is using javascript unobtrusively. Basically you have to turn your radiobutton into links (fully customizable via CSS). each click on link will be bound to the related radiobox, toggling his state and all the others.
For my use all I wanted to do was change the colour and nothing else, so I've taken the answer from #klewis and changed it to...
Make the radio the same as the browser default (Chrome in my case) using relative % and em instead of fixed px. Caveat: em is based on whatever the font-size of input[type=radio] is, which could be inherited. Adjustments to the values below may be necessary.
Keep accessibility functions (like an outline when focused) of the original radio button by not using display: none; and by applying :before and :after to the original radio instead of the label.
/* make default radio 'invisible' */
input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* make new radio outer circle */
input[type=radio]:before {
content: " ";
display: inline-block;
position: relative;
width: 0.8em;
height: 0.8em;
border-radius: 50%;
border: 1px solid grey;
background-color: transparent;
}
/* change colour of radio outer circle when checked */
input[type=radio]:checked:before {
border-color: green;
}
/* make new radio inner circle when checked */
input[type=radio]:checked:after {
content: " ";
display: block;
position: absolute;
width: 0.55em;
height: 0.55em;
border-radius: 50%;
top: 0.4em;
left: 0.13em;
background: green;
}
`
This Worked for me well,
Simply add css attribute:
input[type="radio"]{accent-color: red;}
Here is the link for resource
The simple way is to use accent-color
The accent-color CSS property sets the accent color for user-interface controls generated by some elements
Browsers that support accent-color currently apply it to the following HTML elements:
<input type="checkbox">
<input type="radio">
<input type="range">
<progress>
An runnable example
body {
display: grid;
padding: 3rem 0;
}
.accent {
accent-color: #30cc7e;
}
form {
display: grid;
grid-auto-columns: fit-content(50%);
grid-template-areas: "a a";
margin: auto;
padding: 0;
gap: 1rem;
}
form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin: auto;
}
form section:first-child {
color-scheme: light;
}
form section:last-child {
color-scheme: dark;
}
fieldset {
border-radius: 8px;
color-scheme: light;
display: flex;
flex: 1;
flex-direction: column;
gap: 1rem;
padding: 1rem;
}
.dark {
color-scheme: dark;
}
.dark fieldset {
background: #100f33;
border-color: #100f33;
color: #fff;
}
.dark .accent {
accent-color: hsla(180, 100%, 70%, 1);
}
h2 {
margin: 0;
}
.notice {
background: #fff9c4;
border-radius: 6px;
margin: 1.5rem auto;
padding: 0.5rem;
text-align: center;
}
#supports (accent-color: #fff) {
.notice {
display: none;
}
}
<div class="notice">
Your browser does not support the <code>accent-color</code> property.
</div>
<form action="">
<fieldset>
<h2>Checkboxes</h2>
<div>
<label for="checkbox">
Default
</label>
<input id="checkbox" type="checkbox" checked>
</div>
<div>
<label for="checkbox-accent">
Accent
</label>
<input id="checkbox-accent" type="checkbox" class="accent" checked>
</div>
</fieldset>
<fieldset>
<h2>Radio</h2>
<div>
<input id="radio" type="radio" checked>
<label for="radio">
Default
</label>
</div>
<div>
<input id="radio-accent" type="radio" class="accent" checked>
<label for="radio-accent">
Accent
</label>
</div>
</fieldset>
<fieldset>
<h2>Progress</h2>
<div>
<label for="progress">
Default
</label>
<progress id="progress" min="0" max="100" value="50"></progress>
</div>
<div>
<label for="progress-accent">
Accent
</label>
<progress id="progress-accent" class="accent" min="0" max="100" value="50"></progress>
</div>
</fieldset>
<fieldset>
<h2>Range</h2>
<div>
<label for="range">
Default
</label>
<input id="range" type="range">
</div>
<div>
<label for="range-accent">
Accent
</label>
<input id="range-accent" class="accent" type="range">
</div>
</fieldset>
</form>
You can use accent-color property in css to change background color of both checkbox and radio buttons.
input[type=radio] {
accent-color: red;
}
It may be helpful to bind radio-button to styled label. Futher details in this answer.
A clever way to do it would be to create a separate div with a height and width of -for example- 50px and then a radius of 50px lay this over your radio buttons...
You can embed a span element in the radio input then select a color of your choice to be rendered when a radio input is checked. Check out the example below sourced from w3schools.
<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #00a80e;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
</style>
<body>
<h1>Custom Radio Buttons</h1>
<label class="container">One
<input type="radio" checked="checked" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
</body>
Changing the background color at this code segment below does the trick.
/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #00a80e;
}
Sourced from how to create a custom radio button
If you are using react bootstrap Form.check you could do something like this
HTML
<Form.Check
type="radio"
id="Radio-card"
label={`check me out`}
name="paymentmethod"
value="card"
/>
SCSS
.form-check {
display: flex;
align-items: center;
input[type="radio"] {
-moz-appearance: none;
appearance: none;
width: 11px;
height: 11px;
padding: 1px;
background-clip: content-box;
border: 1px solid hotpink;
background-color: white;
border-radius: 50%;
}
input[type="radio"]:checked {
outline: none;
background-color: hotpink;
border: 1px solid hotpink;
}
label {
font-size: 14px;
font-weight: 600;
}
}
I changed the color and size of radio buttons. Try This
.radio-tile-group {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.radio-tile-group .input-container {
position: relative;
margin: 0.9rem;
}
.radio-tile-group .input-container .radio-button {
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
cursor: pointer;
}
.radio-tile {
border: 1px solid #eea236;
}
.radio-tile-group .input-container .radio-tile-edit {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 25px;
font-size: 12px;
border-radius: 5px;
padding: 0.2rem;
transition: transform 300ms ease;
height: 25px;
}
#media (min-width: 375px) and (max-width: 812px) {
.radio-tile-group .input-container .radio-tile {
margin-inline: 18px;
}
}
.radio-tile-group .input-container .radio-button:checked+.radio-tile {
border: 3px solid #2980b9;
font-size: 12px;
color: #797979;
transform: scale(1.05, 1.05);
}
.radio-tile-group .input-container .radio-button:checked+.radio-tile .icon svg {
fill: white;
background-color: #2980b9;
}
.radio-tile-group .input-container .radio-button:checked+.radio-tile-edit {
border: 3px solid black;
/* font-size: 12px; */
color: #797979;
transform: scale(1.05, 1.05);
}
<label>Radio button colors:</label>
<br>
<div class="radio-tile-group">
<div class="input-container">
<label class="radio-tile-label" style="background-color: #b60205;border-radius: 5px;">
<input type="radio" value="#b60205" class= "radio-button uncheckall" name="print_color">
<div class="radio-tile-edit" style="background-color: #b60205;">
</label>
</div>
</div>
<div class="input-container">
<label class="radio-tile-label" style="background-color: #d93f0b; border-radius: 5px;">
<input type="radio" value="#d93f0b" class= "radio-button uncheckall" name="print_color">
<div class="radio-tile-edit" style="background-color: #d93f0b;">
</label>
</div>
</div>
<div class="input-container">
<label class="radio-tile-label" style="background-color: #fbca04; border-radius: 5px;">
<input type="radio" value="#fbca04" class= "radio-button uncheckall" name="print_color">
<div class="radio-tile-edit" style="background-color: #fbca04;">
</label>
</div>
</div>
<div class="input-container">
<label class="radio-tile-label" style="background-color: #0e8a16; border-radius: 5px;">
<input type="radio" value="#0e8a16" class= "radio-button uncheckall" name="print_color">
<div class="radio-tile-edit" style="background-color: #0e8a16;">
</label>
</div>
</div>
<div class="input-container">
<label class="radio-tile-label" style="background-color: #006b75; border-radius: 5px;">
<input type="radio" value="#006b75" class= "radio-button uncheckall" name="print_color">
<div class="radio-tile-edit" style="background-color:#006b75">
</label>
</div>
</div>
<div class="input-container">
<label class="radio-tile-label" style="background-color: #1d76db; border-radius: 5px;">
<input type="radio" value="#1d76db" class= "radio-button uncheckall" name="print_color">
<div class="radio-tile-edit" style="background-color: #1d76db;">
</label>
</div>
</div>
<div class="input-container">
<label class="radio-tile-label" style="background-color: #0052cc; border-radius: 5px;">
<input type="radio" value="#0052cc" class= "radio-button uncheckall" name="print_color">
<div class="radio-tile-edit" style="background-color: #0052cc;">
</label>
</div>
</div>
<div class="input-container">
<label class="radio-tile-label" style="background-color: #757575; border-radius: 5px;">
<input type="radio" value="#757575" class= "radio-button uncheckall" name="print_color">
<div class="radio-tile-edit" style="background-color: #757575;">
</label>
</div>
</div>
</div>
A simple fix would be to use the following CSS property.
input[type=radio]:checked{
background: \*colour*\;
border-radius: 15px;
border: 4px solid #dfdfdf;
}
I have a form which code looks like this:
<div id="right_sidebar">
<form id="your_name" name="your_name" action="#" method="post" style="display: block; ">
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" value="">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname">
<label for="msg">Comment <span class="sp"></span></label>
<textarea name="msg" id="msg" rows="7"></textarea>
<input type="checkbox" name="agree">
<label for="agree">Accept the terms</label>
<button class="blue_button" type="submit">Send</button>
</fieldset>
</form>
</div>
And which is styled with the following CSS:
body {
color: #333;
font: 12px Arial,Helvetica Neue,Helvetica,sans-serif;
}
#right_sidebar {
padding-top: 12px;
width: 190px;
position:relative;
}
form {
background: #EEF4F7;
border: solid red;
border-width: 1px 0;
display: block;
margin-top: 10px;
padding: 10px;
}
form label {
color: #435E66;
display:block;
font-size: 12px;
}
form textarea {
border: 1px solid #ABBBBE;
margin-bottom: 10px;
padding: 4px 3px;
width: 160px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form label a {
display: block;
padding-left: 10px;
position: relative;
text-decoration: underline;
}
form label a .sp {
background: #EEF4F7;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
}
form button.blue_button {
margin-top: 10px;
vertical-align: top;
}
button.blue_button{
color: white;
font-size: 12px;
height: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.blue_button {
background-color: #76C8C6;
border: 1px solid #7798B7;
text-shadow: 1px 1px 0px #567C9E;
}
As you can see the checkbox is on top of the label. I would like both to be "on the same line". So, it would look like "[ ] Accept the terms". And how would I make that the text is vertically aligned to the checkbox.
How could I do both?
You can see it live here: form, checkbox failing
One option is to amend the style of the label element that follows the checkbox:
input[type=checkbox] + label {
display: inline-block;
margin-left: 0.5em;
margin-right: 2em;
line-height: 1em;
}
JS Fiddle demo.
This is, however, somewhat fragile as the margins are a little arbitrary (and the margin-right is purely to force the following button to the next line). Also the attribute-equals selector may cause problems in older browsers.
As implied, in comments, by Mr. Alien it is actually easier to target the checkbox itself with this selector-notation:
input[type=checkbox] {
float: left;
margin-right: 0.4em;
}
JS Fiddle demo.
It is because the label has display: block on it. It means that (without a float or hack) it will claim it's own line.
Change it to display: inline-block or leave the display rule away and you're done.
Seeing you did this intentionally for the first two labels, you should give the accept the terms label an id and use form #accepttermslabel {display: inline-block}. This will override the other rules et because it is more specific.
Wrap your checkbox and text within the <label> tag. Works with your current CSS as seen here in this jsFiddle Demo.
<label for="checkbox">
<input id="checkbox" type="checkbox"> My Label
</label>
Forked your fiddle here with one small change. I nested the checkbox inside the label.
<label for="agree"><input type="checkbox" name="agree">Accept the terms</label>
Hope it helps.
All you need to do is add display: inline to the label. Like this:
label[for="agree"] {
display: inline;
}
You may also have to add the following to get the Send button to stay on its own line:
button[type="submit"] {
display: block;
}
That is enough to make it work, but you could also nest the input inside the label, like this:
<label for="agree">
<input type="checkbox" name="agree" />
Accept the terms
</label>
However, most people avoid doing this because it is semantically constricting. I would go with the first method.
Set a class on the checkbox list as follows:
<asp:CheckBoxList ID="chkProject" runat="server" RepeatLayout="Table" RepeatColumns="3" CssClass="FilterCheck"></asp:CheckBoxList>
Then add the following CSS:
.FilterCheck td {
white-space:nowrap !important;
}
This ensures the label stays on the same line as the checkbox.
I had the same problem with bootstrap 3 horizontal-form, and finally found a try-error solution and works with plain html-css too.
Check my Js Fiddle Demo
.remember {
display: inline-block;
}
.remember input {
position: relative;
top: 2px;
}
<div>
<label class="remember" for="remember_check">
<input type="checkbox" id="remember_check" /> Remember me
</label>
</div>
Tried the flex attribute?
Here's your example with flex added:
HTML
<div id="right_sidebar">
<form id="send_friend" name="send_friend" action="#" method="post" style="display: block; ">
<fieldset>
<label for="from">From</label>
<input type="text" name="from" id="from" value="">
<label for="to">To</label>
<input type="text" name="to" id="to">
<label for="msg">Comment <span class="sp"></span>
</label>
<textarea name="msg" id="msg" rows="7"></textarea>
<div class="row">
<div class="cell" float="left">
<input type="checkbox" name="agree">
</div>
<div class="cell" float="right" text-align="left">
<label for="agree">Accept the terms</label>
</div>
</div>
<button class="blue_button" type="submit">Send</button>
</fieldset>
</form>
</div>
CSS
body {
color: #333;
font: 12px Arial, Helvetica Neue, Helvetica, sans-serif;
}
[class="row"] {
display: flex;
flex-flow: row wrap;
margin: 2 auto;
}
[class="cell"] {
padding: 0 2px;
}
#right_sidebar {
padding-top: 12px;
width: 190px;
position:relative;
}
form {
background: #EEF4F7;
border: solid red;
border-width: 1px 0;
display: block;
margin-top: 10px;
padding: 10px;
}
form label {
color: #435E66;
display:block;
font-size: 12px;
}
form textarea {
border: 1px solid #ABBBBE;
margin-bottom: 10px;
padding: 4px 3px;
width: 160px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form label a {
display: block;
padding-left: 10px;
position: relative;
text-decoration: underline;
}
form label a .sp {
background: #EEF4F7;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
}
form button.blue_button {
margin-top: 10px;
vertical-align: top;
}
button.blue_button {
color: white;
font-size: 12px;
height: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.blue_button {
background-color: #76C8C6;
border: 1px solid #7798B7;
text-shadow: 1px 1px 0px #567C9E;
}
Flex allows for table style control with the use of divs for example.
The simplest way I found to have the checkbox and the label aligned is :
.aligned {
vertical-align: middle;
}
<div>
<label for="check">
<input class="aligned" type="checkbox" id="check" /> align me
</label>
</div>
<div>
<input class="aligned" type="checkbox" />
<label>align me too</label>
</div>
<div>
<input type="checkbox" />
<label>dont align me</label>
</div>
I know this post is old, but I'd like to help those who will see this in the future. The answer is pretty simple.
<input type="checkbox" name="accept_terms_and_conditions" value="true" />
<label id="margin-bottom:8px;vertical-align:middle;">I Agree</label>
I mean, a radio button itself consists of a round shape and a dot at the center (when the button is selected). What I want to change is the color of both. Can this be done using CSS?
A quick fix would be to overlay the radio button input style using :after, however it's probably a better practice to create your own custom toolkit.
input[type='radio']:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: #d1d3d1;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
}
input[type='radio']:checked:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: #ffa500;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
}
<input type='radio' name="gender"/>
<input type='radio' name="gender"/>
A radio button is a native element specific to each OS/browser. There is no way to change its color/style, unless you want to implement custom images or use a custom Javascript library which includes images (e.g. this - cached link)
As Fred mentioned, there is no way to natively style radio buttons in regards to color, size, etcc. But you can use CSS Pseudo elements to setup an impostor of any given radio button, and style it. Touching on what JamieD said, on how we can use the :after Pseudo element, you can use both :before and :after to achieve a desirable look.
Benefits of this approach:
Style your radio button and also Include a label for content.
Change the outer rim color and/or checked circle to any color you like.
Give it a transparent look with modifications to background color property and/or optional use of the opacity property.
Scale the size of your radio button.
Add various drop shadow properties such as CSS drop shadow inset where needed.
Blend this simple CSS/HTML trick into various Grid systems, such as Bootstrap 3.3.6, so it matches the rest of your Bootstrap components visually.
Explanation of short demo below:
Set up a relative in-line block for each radio button
Hide the native radio button sense there is no way to style it directly.
Style and align the label
Rebuilding CSS content on the :before Pseudo-element to do 2 things - style the outer rim of the radio button and set element to appear first (left of label content). You can learn basic steps on Pseudo-elements here - http://www.w3schools.com/css/css_pseudo_elements.asp
If the radio button is checked, request for label to display CSS content (the styled dot in the radio button) afterwards.
The HTML
<div class="radio-item">
<input type="radio" id="ritema" name="ritem" value="ropt1">
<label for="ritema">Option 1</label>
</div>
<div class="radio-item">
<input type="radio" id="ritemb" name="ritem" value="ropt2">
<label for="ritemb">Option 2</label>
</div>
The CSS
.radio-item {
display: inline-block;
position: relative;
padding: 0 6px;
margin: 10px 0 0;
}
.radio-item input[type='radio'] {
display: none;
}
.radio-item label {
color: #666;
font-weight: normal;
}
.radio-item label:before {
content: " ";
display: inline-block;
position: relative;
top: 5px;
margin: 0 5px 0 0;
width: 20px;
height: 20px;
border-radius: 11px;
border: 2px solid #004c97;
background-color: transparent;
}
.radio-item input[type=radio]:checked + label:after {
border-radius: 11px;
width: 12px;
height: 12px;
position: absolute;
top: 9px;
left: 10px;
content: " ";
display: block;
background: #004c97;
}
A short demo to see it in action
In conclusion, no JavaScript, images or batteries required. Pure CSS.
You can use the CSS accent-color property to change the color.
input[type='radio'] {
accent-color: #232323;
}
It works with Chrome/Edge 93+, Firefox 92+, and Safari 15.4+ (Browser support info from caniuse.)
You can achieve customized radio buttons in two pure CSS ways
Via removing standard appearance using CSS appearance and applying custom appearance. Unfortunately this was doesn't work in IE. Demo:
input[type="radio"] {
/* remove standard background appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* create custom radiobutton appearance */
display: inline-block;
width: 25px;
height: 25px;
padding: 6px;
/* background-color only for content */
background-clip: content-box;
border: 2px solid #bbbbbb;
background-color: #e7e6e7;
border-radius: 50%;
}
/* appearance for checked radiobutton */
input[type="radio"]:checked {
background-color: #93e026;
}
/* optional styles, I'm using this for centering radiobuttons */
.flex {
display: flex;
align-items: center;
}
<div class="flex">
<input type="radio" name="radio" id="radio1" />
<label for="radio1">RadioButton1</label>
</div>
<div class="flex">
<input type="radio" name="radio" id="radio2" />
<label for="radio2">RadioButton2</label>
</div>
<div class="flex">
<input type="radio" name="radio" id="radio3" />
<label for="radio3">RadioButton3</label>
</div>
Via hiding radiobutton and setting custom radiobutton appearance to label's pseudoselector. By the way no need for absolute positioning here (I see absolute positioning in most demos). Demo:
*,
*:before,
*:after {
box-sizing: border-box;
}
input[type="radio"] {
display: none;
}
input[type="radio"]+label:before {
content: "";
/* create custom radiobutton appearance */
display: inline-block;
width: 25px;
height: 25px;
padding: 6px;
margin-right: 3px;
/* background-color only for content */
background-clip: content-box;
border: 2px solid #bbbbbb;
background-color: #e7e6e7;
border-radius: 50%;
}
/* appearance for checked radiobutton */
input[type="radio"]:checked + label:before {
background-color: #93e026;
}
/* optional styles, I'm using this for centering radiobuttons */
label {
display: flex;
align-items: center;
}
<input type="radio" name="radio" id="radio1" />
<label for="radio1">RadioButton1</label>
<input type="radio" name="radio" id="radio2" />
<label for="radio2">RadioButton2</label>
<input type="radio" name="radio" id="radio3" />
<label for="radio3">RadioButton3</label>
Only if you are targeting webkit-based browsers (Chrome and Safari, maybe you are developing a Chrome WebApp, who knows...), you can use the following:
input[type='radio'] {
-webkit-appearance: none;
}
And then style it as if it were a simple HTML element, for example applying a background image.
Use input[type='radio']:active for when the input is selected, to provide the alternate graphics
Update: As of 2018 you can add the following to support multiple browser vendors:
input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
Try something like this:
#yes{
border:2px solid white;
box-shadow:0 0 0 1px #392;
appearance:none;
border-radius:50%;
width:12px;
height:12px;
background-color:#fff;
transition:all ease-in 0.2s;
}
#yes:checked{
background-color:#392;
}
#no{
border:2px solid white;
box-shadow:0 0 0 1px #932;
appearance:none;
border-radius:50%;
width:12px;
height:12px;
background-color:#fff;
transition:all ease-in 0.2s;
}
#no:checked{
background-color:#932;
}
<input id="yes" type="radio" name="s"><label for="yes">Yes</label></br>
<input id="no" type="radio" name="s"><label for="no">No</label>
There is less of code, it looks better and you don't need to play with :before , :after and position to reach the effect.
you can use the checkbox hack as explained in css tricks
http://css-tricks.com/the-checkbox-hack/
working example of radio button:
http://codepen.io/Angelata/pen/Eypnq
input[type=radio]:checked ~ .check {}
input[type=radio]:checked ~ .check .inside{}
Works in IE9+, Firefox 3.5+, Safari 1.3+, Opera 6+, Chrome anything.
simple cross browser custom radio button example for you
.checkbox input{
display: none;
}
.checkbox input:checked + label{
color: #16B67F;
}
.checkbox input:checked + label i{
background-image: url('http://kuzroman.com/images/jswiddler/radio-button.svg');
}
.checkbox label i{
width: 15px;
height: 15px;
display: inline-block;
background: #fff url('http://kuzroman.com/images/jswiddler/circle.svg') no-repeat 50%;
background-size: 12px;
position: relative;
top: 1px;
left: -2px;
}
<div class="checkbox">
<input type="radio" name="sort" value="popularity" id="sort1">
<label for="sort1">
<i></i>
<span>first</span>
</label>
<input type="radio" name="sort" value="price" id="sort2">
<label for="sort2">
<i></i>
<span>second</span>
</label>
</div>
https://jsfiddle.net/kuzroman/ae1b34ay/
Well to create extra elements we can use :after, :before (so we don’t have to change the HTML that much). Then for radio buttons and checkboxes we can use :checked. There are a few other pseudo elements we can use as well (such as :hover). Using a mixture of these we can create some pretty cool custom forms. check this
I builded another fork of #klewis' code sample to demonstrate some playing with pure css and gradients by using :before/:after pseudo elements and a hidden radio input button.
HTML:
sample radio buttons:
<div style="background:lightgrey;">
<span class="radio-item">
<input type="radio" id="ritema" name="ritem" class="true" value="ropt1" checked="checked">
<label for="ritema">True</label>
</span>
<span class="radio-item">
<input type="radio" id="ritemb" name="ritem" class="false" value="ropt2">
<label for="ritemb">False</label>
</span>
</div>
:
CSS:
.radio-item input[type='radio'] {
visibility: hidden;
width: 20px;
height: 20px;
margin: 0 5px 0 5px;
padding: 0;
}
.radio-item input[type=radio]:before {
position: relative;
margin: 4px -25px -4px 0;
display: inline-block;
visibility: visible;
width: 20px;
height: 20px;
border-radius: 10px;
border: 2px inset rgba(150,150,150,0.75);
background: radial-gradient(ellipse at top left, rgb(255,255,255) 0%, rgb(250,250,250) 5%, rgb(230,230,230) 95%, rgb(225,225,225) 100%);
content: "";
}
.radio-item input[type=radio]:checked:after {
position: relative;
top: 0;
left: 9px;
display: inline-block;
visibility: visible;
border-radius: 6px;
width: 12px;
height: 12px;
background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
content: "";
}
.radio-item input[type=radio].true:checked:after {
background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
}
.radio-item input[type=radio].false:checked:after {
background: radial-gradient(ellipse at top left, rgb(255,225,200) 0%, rgb(250,200,150) 5%, rgb(200,25,0) 95%, rgb(100,25,0) 100%);
}
.radio-item label {
display: inline-block;
height: 25px;
line-height: 25px;
margin: 0;
padding: 0;
}
preview:
https://www.codeply.com/p/y47T4ylfib
For those who prefer to start development with a minimal example, here's a simple custom radio button that doesn't depend on label:
[type="radio"] {
visibility: hidden; /* hide default radio button */
/* you may need to adjust margin here, too */
}
[type="radio"]::before { /* create pseudoelement */
border: 2px solid gray; /* thickness, style, color */
height: .9em; /* height adjusts with font */
width: .9em; /* width adjusts with font */
border-radius: 50%; /* make it round */
display: block; /* or flex or inline-block */
content: " "; /* won't display without this */
cursor: pointer; /* appears clickable to mouse users */
visibility: visible; /* reverse the 'hidden' above */
}
[type="radio"]:checked::before { /* selected */
/* add middle dot when selected */
/* slightly bigger second value makes it smooth */
/* even more (e.g., 20% 50%) would make it fuzzy */
background: radial-gradient(gray 36%, transparent 38%);
}
<br>
<input type="radio" name="example" id="one" value="one">
<label for="one">one</label>
<br>
<br>
<input type="radio" name="example" id="two" value="two">
<label for="two">two</label>
Try this css with transition:
Demo
$DarkBrown: #292321;
$Orange: #CC3300;
div {
margin:0 0 0.75em 0;
}
input[type="radio"] {
display:none;
}
input[type="radio"] + label {
color: $DarkBrown;
font-family:Arial, sans-serif;
font-size:14px;
}
input[type="radio"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
cursor:pointer;
-moz-border-radius: 50%;
border-radius: 50%;
}
input[type="radio"] + label span {
background-color:$DarkBrown;
}
input[type="radio"]:checked + label span{
background-color:$Orange;
}
input[type="radio"] + label span,
input[type="radio"]:checked + label span {
-webkit-transition:background-color 0.4s linear;
-o-transition:background-color 0.4s linear;
-moz-transition:background-color 0.4s linear;
transition:background-color 0.4s linear;
}
Html :
<div>
<input type="radio" id="radio01" name="radio" />
<label for="radio01"><span></span>Radio Button 1</label>
</div>
<div>
<input type="radio" id="radio02" name="radio" />
<label for="radio02"><span></span>Radio Button 2</label>
</div>
Simple , you can be used accent-color
View page source
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input[type=radio] {
accent-color: red;
}
</style>
</head>
<body>
<label for="css">Are you like to css</label>
<input type="radio" id="css" value="css">
</body>
</html>
You should use the accent-color CSS property, which sets the accent color for user-interface controls such as inputs (radio buttons, checkboxes...) or progress bars and it's supported for most modern browsers.
input {
accent-color: red;
}
document.querySelector("input[name=accent-color]").addEventListener("input", () => {
document.documentElement.style.setProperty("--accent-color", event.target.value);
});
:root {
--accent-color: red;
}
input,
progress {
accent-color: var(--accent-color);
}
/* Other styles */
label {
display: flex;
align-items: center;
gap: .625rem;
margin-bottom: .625rem;
}
label:first-child {
font-size: 1.15rem;
font-weight: bold;
}
input {
flex: 0 0 auto;
height: 1.25rem;
width: 1.25rem;
}
input[type="color"] {
width: 3rem;
}
input[type="range"] {
width: 12.5rem;
}
<label>Change the accent color<input name="accent-color" type="color" value="#ff0000"></input></label><br>
<label><input name="radio" type="radio" checked></input>Radio button</label>
<label><input name="radio" type="radio"></input>Another radio button</label>
<label><input name="check" type="checkbox" checked></input>Checkbox</label>
<label><input name="range" type="range"></input>Range input</label>
<label><progress value="50" max="100"></progress>Progress bar</label>
This is not possible by native CSS. You'll have to use background images and some javascript tricks.
As other said, there's no way to achieve this in all browser, so best way of doing so crossbrowser is using javascript unobtrusively. Basically you have to turn your radiobutton into links (fully customizable via CSS). each click on link will be bound to the related radiobox, toggling his state and all the others.
For my use all I wanted to do was change the colour and nothing else, so I've taken the answer from #klewis and changed it to...
Make the radio the same as the browser default (Chrome in my case) using relative % and em instead of fixed px. Caveat: em is based on whatever the font-size of input[type=radio] is, which could be inherited. Adjustments to the values below may be necessary.
Keep accessibility functions (like an outline when focused) of the original radio button by not using display: none; and by applying :before and :after to the original radio instead of the label.
/* make default radio 'invisible' */
input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* make new radio outer circle */
input[type=radio]:before {
content: " ";
display: inline-block;
position: relative;
width: 0.8em;
height: 0.8em;
border-radius: 50%;
border: 1px solid grey;
background-color: transparent;
}
/* change colour of radio outer circle when checked */
input[type=radio]:checked:before {
border-color: green;
}
/* make new radio inner circle when checked */
input[type=radio]:checked:after {
content: " ";
display: block;
position: absolute;
width: 0.55em;
height: 0.55em;
border-radius: 50%;
top: 0.4em;
left: 0.13em;
background: green;
}
`
This Worked for me well,
Simply add css attribute:
input[type="radio"]{accent-color: red;}
Here is the link for resource
The simple way is to use accent-color
The accent-color CSS property sets the accent color for user-interface controls generated by some elements
Browsers that support accent-color currently apply it to the following HTML elements:
<input type="checkbox">
<input type="radio">
<input type="range">
<progress>
An runnable example
body {
display: grid;
padding: 3rem 0;
}
.accent {
accent-color: #30cc7e;
}
form {
display: grid;
grid-auto-columns: fit-content(50%);
grid-template-areas: "a a";
margin: auto;
padding: 0;
gap: 1rem;
}
form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin: auto;
}
form section:first-child {
color-scheme: light;
}
form section:last-child {
color-scheme: dark;
}
fieldset {
border-radius: 8px;
color-scheme: light;
display: flex;
flex: 1;
flex-direction: column;
gap: 1rem;
padding: 1rem;
}
.dark {
color-scheme: dark;
}
.dark fieldset {
background: #100f33;
border-color: #100f33;
color: #fff;
}
.dark .accent {
accent-color: hsla(180, 100%, 70%, 1);
}
h2 {
margin: 0;
}
.notice {
background: #fff9c4;
border-radius: 6px;
margin: 1.5rem auto;
padding: 0.5rem;
text-align: center;
}
#supports (accent-color: #fff) {
.notice {
display: none;
}
}
<div class="notice">
Your browser does not support the <code>accent-color</code> property.
</div>
<form action="">
<fieldset>
<h2>Checkboxes</h2>
<div>
<label for="checkbox">
Default
</label>
<input id="checkbox" type="checkbox" checked>
</div>
<div>
<label for="checkbox-accent">
Accent
</label>
<input id="checkbox-accent" type="checkbox" class="accent" checked>
</div>
</fieldset>
<fieldset>
<h2>Radio</h2>
<div>
<input id="radio" type="radio" checked>
<label for="radio">
Default
</label>
</div>
<div>
<input id="radio-accent" type="radio" class="accent" checked>
<label for="radio-accent">
Accent
</label>
</div>
</fieldset>
<fieldset>
<h2>Progress</h2>
<div>
<label for="progress">
Default
</label>
<progress id="progress" min="0" max="100" value="50"></progress>
</div>
<div>
<label for="progress-accent">
Accent
</label>
<progress id="progress-accent" class="accent" min="0" max="100" value="50"></progress>
</div>
</fieldset>
<fieldset>
<h2>Range</h2>
<div>
<label for="range">
Default
</label>
<input id="range" type="range">
</div>
<div>
<label for="range-accent">
Accent
</label>
<input id="range-accent" class="accent" type="range">
</div>
</fieldset>
</form>
You can use accent-color property in css to change background color of both checkbox and radio buttons.
input[type=radio] {
accent-color: red;
}
It may be helpful to bind radio-button to styled label. Futher details in this answer.
A clever way to do it would be to create a separate div with a height and width of -for example- 50px and then a radius of 50px lay this over your radio buttons...
You can embed a span element in the radio input then select a color of your choice to be rendered when a radio input is checked. Check out the example below sourced from w3schools.
<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #00a80e;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
</style>
<body>
<h1>Custom Radio Buttons</h1>
<label class="container">One
<input type="radio" checked="checked" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
</body>
Changing the background color at this code segment below does the trick.
/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #00a80e;
}
Sourced from how to create a custom radio button
If you are using react bootstrap Form.check you could do something like this
HTML
<Form.Check
type="radio"
id="Radio-card"
label={`check me out`}
name="paymentmethod"
value="card"
/>
SCSS
.form-check {
display: flex;
align-items: center;
input[type="radio"] {
-moz-appearance: none;
appearance: none;
width: 11px;
height: 11px;
padding: 1px;
background-clip: content-box;
border: 1px solid hotpink;
background-color: white;
border-radius: 50%;
}
input[type="radio"]:checked {
outline: none;
background-color: hotpink;
border: 1px solid hotpink;
}
label {
font-size: 14px;
font-weight: 600;
}
}
I changed the color and size of radio buttons. Try This
.radio-tile-group {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.radio-tile-group .input-container {
position: relative;
margin: 0.9rem;
}
.radio-tile-group .input-container .radio-button {
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
cursor: pointer;
}
.radio-tile {
border: 1px solid #eea236;
}
.radio-tile-group .input-container .radio-tile-edit {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 25px;
font-size: 12px;
border-radius: 5px;
padding: 0.2rem;
transition: transform 300ms ease;
height: 25px;
}
#media (min-width: 375px) and (max-width: 812px) {
.radio-tile-group .input-container .radio-tile {
margin-inline: 18px;
}
}
.radio-tile-group .input-container .radio-button:checked+.radio-tile {
border: 3px solid #2980b9;
font-size: 12px;
color: #797979;
transform: scale(1.05, 1.05);
}
.radio-tile-group .input-container .radio-button:checked+.radio-tile .icon svg {
fill: white;
background-color: #2980b9;
}
.radio-tile-group .input-container .radio-button:checked+.radio-tile-edit {
border: 3px solid black;
/* font-size: 12px; */
color: #797979;
transform: scale(1.05, 1.05);
}
<label>Radio button colors:</label>
<br>
<div class="radio-tile-group">
<div class="input-container">
<label class="radio-tile-label" style="background-color: #b60205;border-radius: 5px;">
<input type="radio" value="#b60205" class= "radio-button uncheckall" name="print_color">
<div class="radio-tile-edit" style="background-color: #b60205;">
</label>
</div>
</div>
<div class="input-container">
<label class="radio-tile-label" style="background-color: #d93f0b; border-radius: 5px;">
<input type="radio" value="#d93f0b" class= "radio-button uncheckall" name="print_color">
<div class="radio-tile-edit" style="background-color: #d93f0b;">
</label>
</div>
</div>
<div class="input-container">
<label class="radio-tile-label" style="background-color: #fbca04; border-radius: 5px;">
<input type="radio" value="#fbca04" class= "radio-button uncheckall" name="print_color">
<div class="radio-tile-edit" style="background-color: #fbca04;">
</label>
</div>
</div>
<div class="input-container">
<label class="radio-tile-label" style="background-color: #0e8a16; border-radius: 5px;">
<input type="radio" value="#0e8a16" class= "radio-button uncheckall" name="print_color">
<div class="radio-tile-edit" style="background-color: #0e8a16;">
</label>
</div>
</div>
<div class="input-container">
<label class="radio-tile-label" style="background-color: #006b75; border-radius: 5px;">
<input type="radio" value="#006b75" class= "radio-button uncheckall" name="print_color">
<div class="radio-tile-edit" style="background-color:#006b75">
</label>
</div>
</div>
<div class="input-container">
<label class="radio-tile-label" style="background-color: #1d76db; border-radius: 5px;">
<input type="radio" value="#1d76db" class= "radio-button uncheckall" name="print_color">
<div class="radio-tile-edit" style="background-color: #1d76db;">
</label>
</div>
</div>
<div class="input-container">
<label class="radio-tile-label" style="background-color: #0052cc; border-radius: 5px;">
<input type="radio" value="#0052cc" class= "radio-button uncheckall" name="print_color">
<div class="radio-tile-edit" style="background-color: #0052cc;">
</label>
</div>
</div>
<div class="input-container">
<label class="radio-tile-label" style="background-color: #757575; border-radius: 5px;">
<input type="radio" value="#757575" class= "radio-button uncheckall" name="print_color">
<div class="radio-tile-edit" style="background-color: #757575;">
</label>
</div>
</div>
</div>
A simple fix would be to use the following CSS property.
input[type=radio]:checked{
background: \*colour*\;
border-radius: 15px;
border: 4px solid #dfdfdf;
}