Pseudo-classes

:valid

represents any <input> or other <form> element whose contents validate successfully

input:valid {
  border-color: green;
}

needs "required"

Pseudo-classes

:invalid

any <input> or other <form> element whose contents fail to validate.

input:invalid {
  border-color: red;
}

needs "required"

Pseudo-classes = states

Pseudo-classes = states

input:invalid:not(:focus, :placeholder-shown) { ... }

Placeholder-shown

https://css-tricks.com/snippets/css/form-validation-styling-on-input-focus/

input:invalid:not(:focus, :placeholder-shown) ~ .error-message { ... }

input:user-invalid { ... }

:user-valid/-invalid

input:user-invalid ~ .error-message { ... }

@supports (margin: 10px) {...}

@supports selector(:has(+ *)) {...}

@supports

https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

Browser-kompatibilitet

if(CSS.supports("margin: 10px"))

@supports not (margin: 10px) {...}

@supports not selector(:has(+ *)) {...}

@supports

https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

Ikke browser-kompatibel

if(!CSS.supports("margin: 10px"))

:has()

.form-group:has(input:user-invalid) { ... }

.form-group:has(input:user-invalid) .error-message { ... }

.form-group:has(input:not(:focus, :placeholder-shown):invalid) label { ... }

:has()

.form-group:has(input:invalid) { ... }

.form-group:has(input:not(:focus, :placeholder-shown):invalid) .error-message { ... }

label:has( + input:user-invalid) { ... }

:has()

label {
  color: var(--color);
}

.form-group:has(:user-invalid) {
  --color: red;
}

.form-group:has(:user-valid) {
  --color: green;
}

:has()

field-sizing

textarea

field-sizing

Browser compatibility

🫢

field-sizing

Browser compatibility

caniuse.com

Focus states

https://www.sarasoueidan.com/blog/focus-indicators/

Focus states

Safari 💩

Focus states

Firefox 💩

Focus states

:focus-visible {
  outline: 2px solid #000;
  outline-offset: -2px;
  box-shadow: 0 0 0 2px #fff, inset 0 0 0 3px #fff;
}

input {
  appearance: none; /* Safari fix */
}

https://medienbaecker.com/articles/focus-outlines

Custom Checkboxes / Radios

User Agent styles

UA styles

 form {
  accent-color: deeppink;
}

https://web.dev/accent-color/

Simplifying form styles accent-color

Rule of Least Power

Customize

 input[type="checkbox"] {
  appearance: none;
  ...
}
 
/* Checked state */
input:checked::before {
  ...
}

Remove browser styles

Style custom checkmark with pseudo-elements

Advanced_form_styling

Checkbox style 2021

Ressourcer

Gør det mere spændende

Reducerer cognitive load

Styling complex labels

https://codepen.io/dannievinther/pen/rNKNjZY/8e559acc6a0af5e50e407a5cbdf8f94d

Gør det mere spændende

Animated checkmark

Preparing an SVG in Figma / Illustrator

Animated checkmark

Resources

https://css-tricks.com/svg-line-animation-works/

😭

Cascade layers

 @layer reset, components, states;
 
@layer components {
  /* Buttons, inputs etc. */
}
 
@layer states {
  /* Make sure stats override, no matter specificity count */
  :disabled {
    background-color: #ddd;
    color: #999;
  }
  
  :focus-visible {
    outline: 2px solid var(--focus-color, currentColor);
    outline-offset: 2px;
  }
}

Cascade layers

 @layer reset, global, components, utilities, states;

A sensible CSS reset

Default styling

 :root {
  --theme-color: 258 29% 43%;
  --accent-color: 180 50% 43%;
}
 
input {
  font: inherit;
  font-size: max(16px, 1em);
  padding: 0.25em 0.5em;
  background-color: #fff;
  border: 2px solid hsl(var(--theme-color));
}
 
input:is(:focus-visible, :hover) {
  border-color: hsl(var(--accent-color));
}

A sensible CSS reset

Default styling

 input:is([type="checkbox"], [type="radio"]) {
  appearance: none;
  /* custom styling */
}

A sensible CSS reset

Or with accent-color

 form {
  accent-color: var(--theme-color, hotpink);
  /* checkbox, radio, progress, range etc. */
}

A sensible CSS reset

Form layout

 form {
  display: grid;
  gap: 1.5rem;
}
 
.form-group {
  display: grid;
  gap: .3125rem;
}

Link: 4 CSS layouts without using media queries

form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

form > input {
  flex: 1 1 10ch;
}

input[type="email"] {
  flex: 3 1 30ch;
}

container queries are finally here

.container {
  container-type: inline-size;
}

@container (width > 25rem) {
  .newsletter { ... }
}

	input[type="checkbox"] {
	appearance: none;
	...
	}

	/* Checked state */
	input:checked::before {
	...
	}

	@layer reset, components, states;

	@layer components {
	/* Buttons, inputs etc. */
	}

	@layer states {
	/* Make sure stats override, no matter specificity count */
	:disabled {
	background-color: #ddd;
	color: #999;
	}

	:focus-visible {
	outline: 2px solid var(--focus-color, currentColor);
	outline-offset: 2px;
	}
	}

	:root {
	--theme-color: 258 29% 43%;
	--accent-color: 180 50% 43%;
	}

	input {
	font: inherit;
	font-size: max(16px, 1em);
	padding: 0.25em 0.5em;
	background-color: #fff;
	border: 2px solid hsl(var(--theme-color));
	}

	input:is(:focus-visible, :hover) {
	border-color: hsl(var(--accent-color));
	}

	input:is([type="checkbox"], [type="radio"]) {
	appearance: none;
	/* custom styling */
	}

	form {
	accent-color: var(--theme-color, hotpink);
	/* checkbox, radio, progress, range etc. */
	}

	form {
	display: grid;
	gap: 1.5rem;
	}

	.form-group {
	display: grid;
	gap: .3125rem;
	}

Styling for UX