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-formis a placeholder wrapper class — set it on the form container, or drop the prefix to style all inputs globally.- Keep
outline: nonepaired with thebox-shadowring so keyboard accessibility is preserved, not removed. - Recolour by changing the two blue values to your accent colour.