MENU


Input Selectors

input:focus: the <input> element which has focus
input:enabled: all enabled <input> elements
input:disabled: all disabled <input> elements
input:checked: all checked <input> elements
input:required: all <input>s with a 'required' attribute set
input:optional: all <input>s without a 'required' attribute
input:valid: all <input> elements validated successfully
input:invalid: all <input> elements failing validation
input:in-range: all <input>s within min & max attributes
input:out-of-range: all <input>s not within min & max
*:read-write: all elements that can be edited
*:read-only: all elements that cannot be edited
:placeholder-shown: all elements displaying a placeholder
input:indeterminate: all checkboxes with the indeterminate property set to true by JavaScript, all radio buttons with the same name which are unchecked, and <progress> in an indeterminate state
*:default: all the first 'selected' <option>s, checked <input>s, and the form submission <button>

This shows how to create a smart-looking animated switch. (The properties will be explained in the later sections of this tutorial.)
RESETRUNFULL
<!DOCTYPE html><html><head>
<style>
.switch {
	position: relative;
	display: inline-block;
	width: 90px;
	height: 34px;
}
.switch input {
	display:none;
}
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ca2222;
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 34px;
}
.slider::before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	transition: .4s;
	border-radius: 50%;
}
input:checked + .slider {
	background-color: #2ab934;
}
input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
	transform: translateX(55px);
}
.slider::after{
	content:'OFF';
	color: white;
	display: block;
	position: absolute;
	transform: translate(-50%,-50%);
	top: 50%; left: 50%;
	font-size: 10px;
	font-family: Verdana, sans-serif;
}
input:checked + .slider:after {
	content:'ON';
}
</style>
</head><body>
   <label class="switch">
      <input type="checkbox" id="togBtn"/>
      <div class="slider round"></div>
   </label>
</body></html>