|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Pure CSS Styled Radio button</title> |
|
<style> |
|
body { |
|
background-color: #1fc8db; |
|
background-image: linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%); |
|
|
|
font-family: 'Source Sans Pro', sans-serif; |
|
} |
|
.demo { |
|
margin: 60px auto; |
|
} |
|
|
|
.radiogroup { |
|
width: 500px; |
|
margin: 70px auto; |
|
position: relative; |
|
} |
|
|
|
.radiogroup ul { |
|
list-style: none; |
|
} |
|
|
|
.radiogroup ul li { |
|
border-bottom: 2px solid #ffffff; |
|
} |
|
|
|
.radiogroup ul li:last-child { |
|
border-bottom: 1px solid transparent; |
|
} |
|
|
|
.control input { |
|
position: absolute; |
|
left: 30px; |
|
opacity: 0; |
|
} |
|
|
|
.control { |
|
display: block; |
|
position: relative; |
|
padding-left: 60px; |
|
padding-top: 20px; |
|
padding-bottom: 20px; |
|
cursor: pointer; |
|
font-size: 1.8rem; |
|
font-weight: bold; |
|
} |
|
|
|
.control span { |
|
color: #ffffff; |
|
transition: color 0.5s; |
|
} |
|
|
|
.control-indicator { |
|
position: absolute; |
|
top: 14px; |
|
left: 10px; |
|
height: 30px; |
|
width: 30px; |
|
background-color: transparent; |
|
border: 6px solid #ffffff; |
|
border-radius: 50%; |
|
transition: border-color 0.5s; |
|
} |
|
|
|
.control-indicator:after { |
|
content: ''; |
|
position: absolute; |
|
display: block; |
|
left: 5px; |
|
top: 5px; |
|
height: 20px; |
|
width: 20px; |
|
border-radius: 50%; |
|
transition: border-color 0.5s, background-color 0.5s; |
|
} |
|
|
|
.control input:focus ~ span, |
|
.control input:hover ~ span { |
|
color: #FBBC05; |
|
} |
|
.control input:focus ~ .control-indicator, |
|
.control input:hover ~ .control-indicator { |
|
border-color: #FBBC05; |
|
} |
|
|
|
.control input:checked ~ span { |
|
color: #c0392b; |
|
} |
|
.control input:checked ~ .control-indicator { |
|
border-color: #c0392b; |
|
} |
|
.control input:checked ~ .control-indicator:after { |
|
background-color: #c0392b; |
|
} |
|
|
|
h1 { |
|
margin-left: 20px; |
|
color: white; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="demo"> |
|
<h1>Style Radio button <br> using Only CSS</h1> |
|
<div class="radiogroup"> |
|
<ul> |
|
<li> |
|
<label class="control control-radio" for="1"> |
|
<input type="radio" id="1" name="fruit" value="apple"> |
|
<span>Apple</span> |
|
<div class="control-indicator"></div> |
|
</label> |
|
</li> |
|
<li> |
|
<label class="control control-radio" for="2"> |
|
<input type="radio" id="2" name="fruit" value="apple"> |
|
<span>Banana</span> |
|
<div class="control-indicator"></div> |
|
</label> |
|
</li> |
|
<li> |
|
<label class="control control-radio" for="3"> |
|
<input type="radio" id="3" name="fruit" value="pear"> |
|
<span>Pear</span> |
|
<div class="control-indicator"></div> |
|
</label> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</body> |
|
</html> |
