CSS Web Design tutorial: Outline of form button

Article Introduction: CSS Web Design tutorial: The Outline of the form button.

The use of outline, we all like to reset the reset style sheet directly:

* {

Outline:none;

}

Eric Meyers in his CSS reset is such a reset:

/* Remember to define focus styles! */

: Focus {

outline:0;

}

It is common to say these methods. But there's a little bit of a chance that people are still not quite sure. When used in a button in a form, a dotted box still appears in the Firefox browser,--outline. Just today, a friend also asked this question, so check the relevant data, just learned that under Firefox is to use other methods to deal with. So today's tutorial is simple to understand how to deal with this problem.

Problem Description:

As I said before, many designers like to use:

*{outline:none;}

Or

: Focus {Outline:none;}

To resolve the problem of the focus bold dashed box. But have you noticed that using this method, the button will still have a dotted box under Firefox, as shown in the following illustration:

Workaround:

To solve this bug we need to use a private attribute of Mozilla:-moz-focuse-inner. But here's a little bit of special attention: "-moz-focus-inner" does not reset the value of the "outline" attribute, but rather uses it to change the "border" style of buttons, see the following code:

Input::-moz-focus-inner,

Button::-moz-focus-inner {

border:0;

}

The above is written to include all the input, but sometimes we do not want this value to "Input[type=text]" has an effect, so I can actually set up like this:

Button::-moz-focus-inner,

Input[type= "Reset"]::-moz-focus-inner,

Input[type= "button"]::-moz-focus-inner,

Input[type= "Submit"]::-moz-focus-inner,

Input[type= "file"] > input[type= "button"]::-moz-focus-inner {

Border:none;

}

With the above code, that ugly dotted box, we can remove it smoothly, so we actually have to set the button's outline setting to achieve the same style effects as all browsers:

: Focus {Outline:none}/*for ie*/

::-moz-focus-inner {border-color:transparent}/*for mozilla*/

The form button gets the focus, and the rendering is consistent across browsers.

The above is the way to remove the border effect of the outline, but that may not be easy to understand, so you can also like to set the Normal style to understand, as shown in the following code:

Button::-moz-focus-inner,

Input[type= "Reset"]::-moz-focus-inner,

Input[type= "button"]::-moz-focus-inner,

Input[type= "Submit"]::-moz-focus-inner,

Input[type= "file"] > input[type= "button"]::-moz-focus-inner {

border:1px dotted transparent;

}

Button:focus::-moz-focus-inner,

Input[type= "Reset"]:focus::-moz-focus-inner,

Input[type= "button"]:focus::-moz-focus-inner,

Input[type= "Submit"]:focus::-moz-focus-inner,

Input[type= "file"] > input[type= "button"]:focus::-moz-focus-inner {

padding:3px;

Border-color: #F3F3F3;

}

The use of the above can be regarded as a small skill, probably know a lot of people, I do not talk about such a problem, because to me is how it is, I do not have that level to clear, but I only know that this method can solve the problem. Then the use of "outline" is quite a lot, if you are interested, you can refer to the following extended reading:

Css-outlines

Better CSS Outline suppression

a {outline:none;}

Outline

Control Element Outline Position with Outline-offset

Remove Button Focus Outline Using CSS

removing the dotted Outline

Outline

Outline CSS

CSS compatibility and Internet Explorer

I hope the above code is available to all, if you have a better solution