custom switches
<label>
<input type="checkbox" />
do that thing
</label>
appearance: none;
hey, browser, leave this alone
reactivates input::before
input {
appearance: none;
position: relative;
display: inline-block;
background: lightgrey;
height:1.65rem;
width:2.75rem;
vertical-align:middle;
border-radius:2rem;
box-shadow:0px 1px 3px #0003 inset;
transition: 0.25s linear background;
}
input::before {
content: '';
display:block;
width:1.25rem;
height:1.25rem;
background: #fff;
border-radius:1.2rem;
position: absolute;
top:0.2rem;
left:0.2rem;
box-shadow:0px 1px 3px #0003;
transition: 0.25s linear transform;
transform: translateX(0rem);
}
:checked {
background: green;
}
:checked::before {
transform: translateX(1rem)
}
for keyboard use only
use outline-color: transparent;
can be replaced
NOT outline: none;
doesn't exist so reduced accessibility
input: focus-visible {
outline:2px solid dodgerblue;
outline-offset: 2px
}
input:focus {
outline-color: transparent;
}
Safari will render switch type checkboxes ss4
<input type="checkbox" switch />
input {accent-color: hotpink;}
datalist for inputs
will offer suggestions or act as dropdown but still allows text input
<input list="frameworks" />
<datalist id="frameworks">
<option>Bootstrap</option>
<option>Tailwind CSS</option>
<option>Foundation</option>
<option>Bulma</option>
<option>Skeleton</option>
</datalist>
accordions and modals
<details open>
<summary>title</summary>
<p>all the stuff all the stuff all the stuff all the stuff all the stuff all the stuff all the stuff</p>
</details>
<details>
<summary>title 2</summary>
<p>all the stuff all the stuff all the stuff all the stuff all the stuff all the stuff all the stuff</p>
</details>
change the arrow
summary::marker {
font-size: 1.5em;
content: 'emoji';
}
[open] summary: :marker {
font-size: 1.5em;
content: 'other emoji';
}
identify that it's clickable
summary:hover {
cursor: pointer;
background: deeppink;
}
has
hide #other-text unless the form has #other and #other is checked
<fieldset>
<legend>Which do you use?</legend>
<label><input type="radio"> Bootstrap</label>
<label><input type="radio"> Chakra</label>
<label><input type="radio"> Tailwind</label>
<label><input type="radio"> Materialize</label>
<label>
<input id="other" type="radio">
Other
</label>
<input id="other-text">
</fieldset>
form #other-text {
display: none;
}
form:has(#other:checked) #other-text {
display: block;
}
automatic field sizing
input, textarea {field-sizing: content;}