CSS - Custom styling on radio button

HTML & CSS
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; 
	}
2

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

3

Hi there ttmt,

here is a multi-radio-button example - ( just in case :flushed: )…

<!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
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.