Form #3

Give your rating
3.8
4 votes
    • 79+
    • 55+
    • 81+
    • 42+
    • 9.1+
    • 55+
    • 95+
    • 42+
    • 9.3+
    • 6+
    • 55+
Demo
  • 1.54 KB
  • HTML, CSS
  • Form
  • MIT License
HTML
<form>
    <input type="radio" id="on" name="status" value="on" checked />
    <label for="on">On</label>
    <input type="radio" id="off" name="status" value="off" />
    <label for="off">Off</label>
</form>
CSS
body {
	font-family: "Montserrat", sans-serif;
}

form {
	margin: auto;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	   -moz-box-orient: vertical;
	   -moz-box-direction: normal;
	        flex-direction: column;
	position: relative;
	padding-left: 10rem;
color: #ccc;
}

form:before {
	content: "";
	display: block;
	position: absolute;
	width: 7.5rem;
	height: 100%;
	-webkit-border-radius: 99em;
	   -moz-border-radius: 99em;
	        border-radius: 99em;
	left: 0;
	top: 50%;
	border: 0.5rem solid #ccc;
	-webkit-transform: translatey(-50%);
	   -moz-transform: translatey(-50%);
	     -o-transform: translatey(-50%);
	        transform: translatey(-50%);
}

input {
	clip: rect(0 0 0 0);
	-webkit-clip-path: inset(100%);
	        clip-path: inset(100%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

label {
	font-size: 8rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-left: -1.125em;
	line-height: 1;
	cursor: pointer;
	position: relative;
}

label ~ label {
	margin-top: 1rem;
}

label::first-letter {
	color: transparent;
}

input:checked + label::first-letter {
	color: #ccc;
}

Imagine you’re setting up a cool, interactive element on a webpage, like a switch that toggles between “On” and “Off” states, kind of like the light switch in your room but on a computer screen. The code you’re curious about does just that, but with a stylish twist, using HTML for the structure, CSS for the stylish looks, and a space reserved for JavaScript for potential interactivity (though it’s not utilized in this snippet).

First up, the HTML part with a <form> element creates a straightforward toggle with two options, “On” and “Off”. It’s like laying down the tracks for a train. Here, radio buttons are used, which are those little circles you click to make a choice. “On” is set as the default choice (it’s already selected when you load the page).

Now, the CSS kicks in to turn our basic toggle into something visually appealing. The CSS here is all about making things look good. It uses the “Montserrat” font to keep the text sharp and modern, and it centers our form nicely on the page. Then, there’s some magic happening with the form:before part, which adds a cool decorative element to our form, making it not just functional but also a treat for the eyes. The CSS for the input makes the actual radio buttons invisible because we’re going for a clean look, relying on labels for interaction. The labels are styled to be big, bold, and easy to click, enhancing usability while keeping things aesthetically pleasing.

In essence, this code snippet is setting up a stylish toggle switch on a webpage, with a keen eye on both functionality and design. It lays the foundation for a user-friendly interface with the potential for adding interactivity through JavaScript, making it not just a static element but something that can respond to user actions.

Menu