<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Radio buttons styled</title>
<style>
input[type="radio"] {
appearance: none;
}
input[type="radio"] {
width: 20px;
height: 20px;
border-radius: 10px;
border: 2px solid gray;
/* Adjusts the position of the checkboxes on the text baseline */
vertical-align: -2px;
outline: none;
}
input[type="radio"]::before {
display: block;
content: " ";
width: 10px;
height: 10px;
border-radius: 6px;
background-color: red;
font-size: 1.2em;
transform: translate(3px, 3px) scale(0);
transform-origin: center;
transition: all 0.3s ease-in;
}
input[type="radio"]:checked::before {
transform: translate(3px, 3px) scale(1);
transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2);
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Choose your favourite fruit</legend>
<p>
<label>
<input type="radio" name="fruit" value="cherry">
Cherry
</label>
</p>
<p>
<label>
<input type="radio" name="fruit" value="banana">
Banana
</label>
</p>
<p>
<label>
<input type="radio" name="fruit" value="strawberry">
Strawberry
</label>
</p>
</fieldset>
</form>
</body>
</html>
input[type="radio"]::before {
display: block;
content: " ";
width: 10px;
height: 10px;
border-radius: 6px;
background-color: red;
font-size: 1.2em;
transform: translate(3px, 3px) scale(0);
transform-origin: center;
transition: all 0.3s ease-in;
}
input[type="radio"]:checked::before {
transform: translate(3px, 3px) scale(1);
transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.