- Instant help with your CSS coding problems

Remove focus border around input element

Snippet added on Dec 15, 2020 by Mike

Question:

How to remove focus border around input element?

Answer:

*:focus {
  outline: none;
}

Description:

When an HTML element is in focus , then browsers will put a border around it. This border is called outline and can be controlled by the outline CSS property.

The outline CSS shorthand property set all the outline properties (outline-color , outline-style , and outline-width ) in a single declaration.

Assigning outline a value of 0 or none will remove the browser's default focus style. If an element can be interacted with it must have a visible focus indicator. Provide obvious focus styling if the default focus style is removed.

Reference:

The outline property reference

Share "How to remove focus border around input element?"

Related snippets:

Tags:

focused element border, focused element outline, remove outline

Technical term:

Remove focus border around input element

Trending articles

Use clip path in TailwindCSS Set focus border in TailwindCSS Create hover underline animation in TailwindCSS Truncate text in TailwindCSS Create triangles with TailwindCSS Create custom toggle button with TailwindCSS Implement Dark mode with TailwindCSS How to create custom checkboxes in TailwindCSS Fix the Unknown at rule @tailwind warning in VSCode Fix TailwindCSS breaks existing styles

Trending snippets

How to use !important in TailwindCSS Remove focus border around input element Create endless rotation animation in CSS Center an absolute element in TailwindCSS Add class to child when hovering on parent in TailwindCSS Add a box shadow to only one side of an element Add text shadow with Tailwind CSS Create a neon effect with TailwindCSS Add dots if text is too long Access child elements in TailwindCSS Change bullet size in HTML Select the nth child in TailwindCSS Force line break in a long word using CSS Select first child in TailwindCSS How to use calc() in TailwindCSS Use emoji instead of list style Create horizontal rule with text using TailwindCSS How to use CSS variables in TailwindCSS Create blinking background with TailwindCSS Using :not in TailwindCSS

Network articles

Fix the ReactDOM.render is no longer supported in React 18 How to run useEffect only once in React Append an array to another in JavaScript Using GitHub Desktop with Bitbucket repository Fix npm ERR! enoent ENOENT: no such file or directory error Return 0 if field is NULL in MySQL Get multiple cursors in VS Code Access JavaScript object property with hyphen Get the last character of a string in JavaScript Convert camel case to snake case in JavaScript Generate random string in JavaScript Switch browser to fullscreen mode with JavaScript Convert string to int in JavaScript Format code in VS Code Get time difference in minutes in PHP Backup MySQL database PHP Array tutorial Get the first day of the week in Java Use foreach in JavaScript How to install PHP 8 on Windows 10

Interesting things

OpanAi's ChatGPT