How to keep the outer border from turning blue when input gets focus

Today, the editor will share with you the relevant knowledge points about how to keep the outer frame blue when input gets the focus. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

A way to keep the outer border blue when input gets the focus

Border can be applied to almost all tangible html elements, while outline is designed for elements such as links, form controls, and ImageMap.

The effect of outline will automatically appear with the focus of the element, and the corresponding effect will disappear with blur. These are the default behaviors of browsers and do not need to be controlled by JavaScript and CSS. Outline does not affect the size or position of elements as border does.

Using input:focus {outline:none;}, you can achieve the effect that the border does not change blue when the input box gets the focus. This effect can also be used on button, button:focus {outline:none;}.

However, under Firefox, for elements of type button, dotted lines still appear even if outline is set. You can use a private pseudo element of Firefox:

Button:-moz-focus-inner {border:0;}

Note that-moz-focus-inner does not set outline, but sets border.

These are all the contents of the article "how to keep the outer frame blue when input gets focus". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.