Custom input radio buttons
How do I make an custom input radio buttons?
Custom flat input radio buttons width only css.. What is a custom input radio buttons? How do you make a custom input radio buttons? This script and codes were developed by Sander on 18 December 2022, Sunday.
Custom input radio buttons - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom input radio buttons</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link rel='stylesheet' type='text/css' href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,700'>
<div class="wrapper"> <h1>Custom radio buttons</h1> <p>Create custom flat radio buttons width only CSS.</p>
</div>
<div class="wrapper"> <form> <label><input type="radio" name="lipsum" value="Lorum"> Lorem ipsum dolor sit amet </label><br> <label> <input type="radio" name="lipsum" value="Curabitur"> Curabitur sit amet commodo mi </label><br> <label> <input type="radio" name="lipsum" value="Donec"> Donec eget risus ut enim fermentum </label><br> <input type="submit" value="Submit"> </form>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Custom input radio buttons - Script Codes CSS Codes
body { font-family: 'Roboto Slab', serif; font-size: 20px; font-weight: 100; line-height: 1.6em; color: #666; background: #f0f0f0;
}
h1 { font-family: 'Roboto Slab', serif; font-size:2.2em; font-weight: 700; line-height: 1.2em; color: #FFF; margin-bottom: 20px; color: #FF7400;
}
p {
}
.wrapper { width: 60%; padding: 6%; margin: 6% auto; background: #fff;
}
input[type="radio"] { position: relative; width: 0; height: 0;
}
label input:after { position: absolute; top: -10px; left: -10px; content: ''; display: inline-block; width: 10px; height: 10px; background: #FF9640; border-radius: 50%; box-shadow: 0 0 0 2px #FF7400; z-index: 10;
}
label input:checked:after { background: #33CCCC; box-shadow: 0 0 0 2px #009999;
}
input[type="submit"] { padding: 5px 4%; margin-top: 4%; font-family: 'Roboto Slab', serif; font-size: 20px; font-weight: 100; color: #fff; background: #FF7400; border: 0; border-radius: 3px; cursor: pointer;
}
input[type="submit"]:hover { background: #333;
}
Developer | Sander |
Username | skeurentjes |
Uploaded | December 18, 2022 |
Rating | 3 |
Size | 2,158 Kb |
Views | 6,072 |
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!
Name | Size |
Dropdown navigation | 3,158 Kb |
Sidenavigation | 3,421 Kb |
Parallax scrolling background | 3,403 Kb |
Card flip | 2,976 Kb |
Accordion | 4,280 Kb |
Flexbox layout | 3,615 Kb |
Button hover effects | 3,642 Kb |
Sticky widget | 3,762 Kb |
Automatic scroll | 4,042 Kb |
Image clip path mask | 3,911 Kb |
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!
Name | Username | Size |
Dribbble Template | ExtremelyGinger | 2,204 Kb |
My three.js practice | Esambino | 3,203 Kb |
A Pen by Moeid Saleem | Moeidsaleem | 1,862 Kb |
Siema - add pagination to prototype | Pawelgrzybek | 2,575 Kb |
Border image | JohnRiordan | 2,120 Kb |
Day 1 - Portfolio | Chpecson | 3,532 Kb |
Flex Table | Simeonoff | 4,059 Kb |
Slide out Menu | Rbiggs | 4,936 Kb |
Scarlett Johansson Tribute Page | Diomed | 3,233 Kb |
AngularJS Datalist Directive | M-e-conroy | 2,366 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!