CSS Web Design tutorial: Outline of form button

Source: Internet
Author: User
Tags reset

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



    Related Article

    Cloud Intelligence Leading the Digital Future

    Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

    Register Now >

    11.11 Big Sale for Cloud

    Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

    Get It Now >

    Alibaba Cloud Free Trial

    Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

    Learn more >

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.