CSS Blitz - Form fields

README.md

CSS Blitz - Form Fields

https://codesandbox.io/s/kmmwpyy1m3

What to do:

• reset margin: 0, padding: 0, border: 0
• reset font-size: 1em
• add background and color
• fixed height, no vertical padding
• style box-shadow (instead of border)
• don't style :hover, it can be complicated

What to style:

• .input
• .input:hover (optional)
• .input:focus
• .input:focus:hover (optional)
• .input:invalid:not(:focus)
• .input::placeholder
• .input:focus::placeholder
• .input:disabled
• textarea.input { height: auto; min-height: ...; resize: vertical; }
• textarea.input { padding-top, padding-bottom }