Accessible custom CSS only Radio buttons

Developer
Chris Yaxley
Size
2,836 Kb
Views
8,096
  1. Accessible custom CSS only Radio buttons Previews
  2. Accessible custom CSS only Radio buttons HTML Codes
  3. Accessible custom CSS only Radio buttons CSS Codes

How do I make an accessible custom css only radio buttons?

Attempt at accessible custom Radio button with CSS only. WIP, needs to look sexier. . What is a accessible custom css only radio buttons? How do you make a accessible custom css only radio buttons? This script and codes were developed by Chris Yaxley on 07 January 2023, Saturday.

Accessible custom CSS only Radio buttons Previews
IQ Test

Accessible custom CSS only Radio buttons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Accessible custom CSS only Radio buttons</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="example-wrapper"> <h1>Accessible custom CSS only Radio buttons</h1> <h2>WIP, I will make this look better :)</h2> <p>Buliding apon Angelata's excellent custon Radio buttons I made a few small changed so the default radio button sits behind the custom style so is accessible / tabbible.<p/> <p>You can see the original (much sexier example here: <a href="https://codepen.io/Angelata/pen/Eypnq">https://codepen.io/Angelata/pen/Eypnq</a></p> <div class="custom-radios"> <input class="radiobox" id="PhotographyPermisionFalse" name="PhotographyPermission" type="radio" value="False"> <label class="text" for="PhotographyPermisionFalse" tabindex="0">No</label> <div class="check"><div class="inside"></div></div> </div> <div class="custom-radios"> <input class="radiobox" id="PhotographyPermission" name="PhotographyPermission" type="radio" value="True"> <label class="text" for="PhotographyPermission">Yes</label> <div class="check"><div class="inside"></div></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Accessible custom CSS only Radio buttons - Script Codes CSS Codes

.custom-radios { position: relative; height: 2em;
}
.custom-radios input[type=radio] { display: inline-block; height: 1.188em; width: 1.188em;
}
.custom-radios input[type=radio]:focus { border-radius: 100%; box-shadow: 0 0 0.875em 0.188em #FA00F3;
}
.lt-ie9 .custom-radios input[type=radio] { display: inline;
}
.custom-radios label { cursor: pointer; color: #ffffff; display: inline-block; position: relative; z-index: 9; left: -2.063em; padding: 0 0 0 2.5em; height: 2em;
}
.custom-radios .check { position: absolute; top: -2px; left: -3px; display: block; width: .750em; height: .750em; border: .375em solid #ffffff; border-radius: 100%;
}
.lt-ie9 .custom-radios .check { display: none;
}
.custom-radios input[type=radio]:checked ~ .check .inside { position: relative; top: 0; display: block; width: 100%; height: 100%; margin: auto; border-radius: 100%; background: #FA00F3;
}
/*Just page styling from hewre on down*/
html { background-color: #262626; color: #ffffff; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
a { color: #FA00F3;
}
Accessible custom CSS only Radio buttons - Script Codes
Accessible custom CSS only Radio buttons - Script Codes
Home Page Home
Developer Chris Yaxley
Username chrisyaxley
Uploaded January 07, 2023
Rating 3
Size 2,836 Kb
Views 8,096
Do you need developer help for Accessible custom CSS only Radio buttons?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Yaxley (chrisyaxley) Script Codes
Name
Some modern CSS techniques
Quick PostCodes.io test
Responsive Calender view
Basic Mario Keyframes animation
No-JS Tool tips
No-JS Off Canvas Navigation
3D Transforms CSS Carousel
Google style image preview
A Pen by Chris Yaxley
Social Share Sprite using SASS Each
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!