Pretty inputs
How do I make an pretty inputs?
What is a pretty inputs? How do you make a pretty inputs? This script and codes were developed by Hampus Persson on 13 September 2022, Tuesday.
Pretty inputs - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pretty inputs</title> <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> <ul> <li> <input class="Input-radio" type="radio" id="radio1" name="radios" checked="checked" /> <label for="radio1">Radio 1</label> </li> <li> <input class="Input-radio" type="radio" id="radio2" name="radios" /> <label for="radio2">Radio 2</label> </li> <li> <input class="Input-checkbox" type="checkbox" id="check1" name="checks" /> <label for="check1">Check 1</label> </li> <li> <input class="Input-checkbox red" type="checkbox" id="check2" name="checks" /> <label for="check2">Check 2</label> </li>
</ul>
</body>
</html>
Pretty inputs - Script Codes CSS Codes
.Input-radio { display: none; cursor: pointer;
}
.Input-radio:focus, .Input-radio:active { outline: none;
}
.Input-radio + label { color: #333; cursor: pointer; display: block; margin-bottom: 12px; padding-left: 25px; position: relative; text-align: left;
}
.Input-radio + label:before, .Input-radio + label:after { content: ''; display: block; width: 14px; height: 14px; left: 0; bottom: -2px; position: absolute;
}
.Input-radio + label:before { background-color: #fff; border-radius: 50%; border: 2px solid #ddd;
}
.Input-radio + label:after { content: ''; position: absolute; top: 4px; left: 4px; background-color: #fff; width: 10px; height: 10px; border-radius: 50%; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}
.Input-radio + label:hover:after { background-color: #c4c4c4;
}
.Input-radio:checked + label:before { box-shadow: inset 0 0 0 10px #fff;
}
.Input-radio:checked + label:after, .Input-radio:checked + label:hover:after { background-color: #7ed321;
}
.Input-checkbox { display: none; cursor: pointer;
}
.Input-checkbox:focus, .Input-checkbox:active { outline: none;
}
.Input-checkbox + label { color: #333; cursor: pointer; display: block; margin-bottom: 12px; padding-left: 25px; position: relative; text-align: left;
}
.Input-checkbox + label:before, .Input-checkbox + label:after { content: ''; display: block; width: 14px; height: 14px; left: 0; bottom: 0; position: absolute;
}
.Input-checkbox + label:before { background-color: #fff; border: 2px solid #ddd;
}
.Input-checkbox + label:after { position: absolute; top: -1px; left: 5px; background-color: transparent; width: 10px; height: 10px; -webkit-transition: all 50ms ease-in-out; transition: all 50ms ease-in-out; color: #7ed321; content: "x"; opacity: 0;
}
.Input-checkbox:checked + label:after, .Input-checkbox:checked + label:hover:after { font-family: sans-serif; opacity: 1;
}
.Input-checkbox.red + label:after { color: red;
}
body { margin: 4em;
}
Developer | Hampus Persson |
Username | hmps |
Uploaded | September 13, 2022 |
Rating | 3 |
Size | 2,773 Kb |
Views | 22,264 |
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 |
Test for pseudo element animation | 3,306 Kb |
Z-level shadows | 2,311 Kb |
Slider | 4,088 Kb |
JSCSS | 3,963 Kb |
Badge animation | 2,732 Kb |
Rotating cube | 2,161 Kb |
FlowText.js | 3,728 Kb |
Drag and drop editor | 3,422 Kb |
Drill down table | 2,989 Kb |
Button style | 2,644 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 |
Slides-07-1 POSITION | Exhtml | 1,909 Kb |
STAR WARS LIGHTSABER | Francoiscoron | 4,420 Kb |
Resizable SASS Icons | Marianarlt | 7,611 Kb |
Custom Checkbox and radio inputs SCSS | Rgfx | 3,367 Kb |
Typefaces with descriptions | Megandoty | 2,944 Kb |
Navcube | Wbarlow | 4,775 Kb |
Sencha Touch 2.3.1 Basic Grid Example | Trozdol | 2,770 Kb |
CSS Dynamic Width Square Div | Elleestcrimi | 2,861 Kb |
JS Beispiel getElementsByClassName 3 | HSZG-Frontend-Kurs | 1,988 Kb |
LDE old privacy page | Jasonangle | 2,339 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!