VoxelKit
← Back to library
Forms & submission Free

Clear form focus states

Give form inputs a visible, accessible focus ring so users always know where they are typing.

EMAIL
name@site.com
.vk-form input,
.vk-form select,
.vk-form textarea {
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vk-form input:focus-visible,
.vk-form select:focus-visible,
.vk-form textarea:focus-visible {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.25);
}

Add the .vk-form class to a submission or contact form wrapper to give its fields a soft focus ring. Using :focus-visible keeps the ring for keyboard users without flashing it on every mouse click.

Notes

  • .vk-form is a placeholder wrapper class — set it on the form container, or drop the prefix to style all inputs globally.
  • Keep outline: none paired with the box-shadow ring so keyboard accessibility is preserved, not removed.
  • Recolour by changing the two blue values to your accent colour.