ttmt
1
Hi all
I have a jsfiddle here - https://jsfiddle.net/5qmnptuk/4/
I’m trying to craete a custom radio button.
Ive hidden the radio button and then created the new one with :after on the label.
I’m trying to use :checked to style the clicked but its not working
Can anyone see why this doesn’t work.
.form-group{
margin-top: 30px;
}
label{
cursor: pointer;
display: inline-block;
position: relative;
padding-right: 25px;
margin-right: 15px;
}
label:after{
bottom: -1px;
border: 1px solid #aaa;
border-radius: 25px;
content: "";
display: inline-block;
height: 25px;
margin-right: 25px;
position: absolute;
right: -31px;
width: 25px;
}
input[type=radio]{
display: none;
}
input[type=radio]:checked + label{
content: \2022;
color: red;
font-size: 30px;
text-align: center;
line-height: 18px;
}
Hi there ttmt,
try it like this…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
background: #f0f0f0;
}
input[type="radio"] {
position: absolute;
left: -9999em;
}
label {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
cursor: pointer;
}
label:after{
display: inline-block;;
width: 1.25em;
height: 1.25em;
border: 1px solid #aaa;
border-radius: 50%;
margin-left: 0.5em;
font-size: 1.75em;
text-align: center;
line-height: 1.1em;
box-shadow: 0.15em 0.15em 0.15em #999;
background: #fff;
content: ' ';
font-size: 1.75em;
color: #f00;
text-align: center;
line-height: 1.1em;
vertical-align: middle;
}
#r0:checked~label:after {
content: '\2022';
}
</style>
</head>
<body>
<input id="r0" type="radio">
<label for="r0">Label</label>
</body>
</html>
coothead
Hi there ttmt,
here is a multi-radio-button example - ( just in case
)…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
background: #f0f0f0;
font: 1em/1.5em verdana, arial, helvetica, sans-serif;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
ul input[type="radio"] {
position: absolute;
left: -9999em;
}
ul li {
margin-bottom: 0.3em;
}
ul label {
font-size: 1em;
font-weight: bold;
cursor: pointer;
}
ul label:after{
display: inline-block;;
width: 1.25em;
height: 1.25em;
border: 1px solid #aaa;
border-radius: 50%;
margin-left: 0.5em;
font-size: 1.75em;
text-align: center;
line-height: 1.1em;
background: #fff;
content: '';
font-size: 1.75em;
color: #f00;
text-align: center;
text-shadow: 0 0 0.06em #600,
0 0 0.08em #600,
0 0 0.1em #600;
line-height: 1.1em;
vertical-align: middle;
}
:checked~label:after {
content: '\2022';
box-shadow: 0 0 0.2em #999;
}
</style>
</head>
<body>
<ul>
<li><input id="r0" name="r" type="radio"><label for="r0">Label 1</label></li>
<li><input id="r1" name="r" type="radio"><label for="r1">Label 2</label></li>
<li><input id="r2" name="r" type="radio"><label for="r2">Label 3</label></li>
</ul>
</body>
</html>
coothead
1 Like
system
Closed
4
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.