Accessible, pretty radio controls

Developer
Heydon
Size
2,112 Kb
Views
44,528
  1. Accessible, pretty radio controls Previews
  2. Accessible, pretty radio controls HTML Codes
  3. Accessible, pretty radio controls CSS Codes

How do I make an accessible, pretty radio controls?

No javascript or any of that rubbish. Just a span and some pseudo content.. What is a accessible, pretty radio controls? How do you make a accessible, pretty radio controls? This script and codes were developed by Heydon on 27 August 2022, Saturday.

Accessible, pretty radio controls Previews
IQ Test

Accessible, pretty radio controls - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Accessible, pretty radio controls</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <fieldset> <legend>Radio Control Quality</legend> <label for="accessible"> <input type="radio" value="accessible" name="quality" id="accessible"> <span>accessible</span> </label> <label for="pretty"> <input type="radio" value="pretty" name="quality" id="pretty"> <span>pretty</span> </label> <label for="accessible-and-pretty"> <input type="radio" value="pretty" name="quality" id="accessible-and-pretty" checked> <span>accessible and pretty</span> </label>
</fieldset>
</body>
</html>

Accessible, pretty radio controls - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Cabin:700);
/* HTML5 Boilerplate accessible hidden styles */
[type="radio"] { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
}
/* One radio button per line */
label { display: block; cursor: pointer; line-height: 2.5; font-size: 1.5em;
}
[type="radio"] + span { display: block;
}
/* the basic, unchecked style */
[type="radio"] + span:before { content: ''; display: inline-block; width: 1em; height: 1em; vertical-align: -0.25em; border-radius: 1em; border: 0.125em solid #fff; box-shadow: 0 0 0 0.15em #000; margin-right: 0.75em; -webkit-transition: 0.5s ease all; transition: 0.5s ease all;
}
/* the checked style using the :checked pseudo class */
[type="radio"]:checked + span:before { background: green; box-shadow: 0 0 0 0.25em #000;
}
/* never forget focus styling */
[type="radio"]:focus + span:after { content: '\0020\2190'; font-size: 1.5em; line-height: 1; vertical-align: -0.125em;
}
/* Nothing to see here. */
body { margin: 3em auto; max-width: 30em; font-family: Cabin, serif;
}
fieldset { font-size: 1em; border: 2px solid #000; padding: 2em; border-radius: 0.5em;
}
legend { color: #fff; background: #000; padding: 0.25em 1em; border-radius: 1em;
}
Accessible, pretty radio controls - Script Codes
Accessible, pretty radio controls - Script Codes
Home Page Home
Developer Heydon
Username heydon
Uploaded August 27, 2022
Rating 4.5
Size 2,112 Kb
Views 44,528
Do you need developer help for Accessible, pretty radio controls?

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!

Heydon (heydon) Script Codes
Name
Current Page Test Case
4 columns with padding
CSS only, automated, and accessible external link icon
Theme color inverter with filter
Fukol
Hash change logging
Bookish
Controlled chaos
Animated focus styles for kbd users
4 columns, no single remainder
Create amazing web content 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!