<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Radio buttons :checked, :indeterminate</title>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
</head>
<body>
<form>
<fieldset>
<legend>Choose your favourite fruit</legend>
<p>
<input type="radio" name="fruit" value="cherry" id="cherry">
<label for="cherry">Cherry</label>
<span></span>
</p>
<p>
<input type="radio" name="fruit" value="banana" id="banana">
<label for="banana">Banana</label>
<span></span>
</p>
<p>
<input type="radio" name="fruit" value="strawberry" id="strawberry">
<label for="strawberry">Strawberry</label>
<span></span>
</p>
</fieldset>
</form>
</body>
</html>
body {
font-family: 'Josefin Sans', sans-serif;
}
input[type="radio"] {
appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 10px;
border: 2px solid gray;
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);
}
input[type="radio"]:indeterminate {
border: 2px solid red;
animation: 0.4s linear infinite alternate border-pulse;
}
@keyframes border-pulse {
from {
border: 2px solid red;
}
to {
border: 6px solid red;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.