Outline: None VS Outline: 0

outline: none VS outline: 0

According to MDN:

The CSS outline property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single declaration

So when you set outline to none or 0, you are actually telling the browser to set 3 properties (outline-style, outline-width and outline-color)

I used Firefox Developer Tools to find out the difference:

As you can see, they both use the default text color as the outline-color, and they both have outline-style set to none. The only difference is the outline-width:

• When the outline is 0, the outline-width is 0px
• When the outline is none, the outline-width is medium

That is the only difference between the two. You can use either one, they will both display the same way (since the outline-style is none, it does not matter how wide the outline is).

Why is outline:none not considered good practice?

Outline is largely an accessibility feature and should be available on tabbable elements to indicate focus during keyboard navigation.

It provides visual feedback for links that have "focus" when navigating a web document using the TAB key (or equivalent). This is especially useful for folks who can't use a mouse or have a visual impairment. If you remove the outline you are making your site inaccessible for these people.

http://www.outlinenone.com

How can I undo outline:none; without deleting the rule?

I agree with @soulshined's comment about using a class instead, but the value you're looking for is auto.

Snippet (manually focus it in developer tools)

a:focus {

  outline: 0;

}

#withOutline:focus {

  outline: auto;

}

<a href="javascript:void(0)">A bunch of text</a>

<a href="javascript:void(0)">A bunch of text</a>

<a href="javascript:void(0)">A bunch of text</a>

<a href="javascript:void(0)">A bunch of text</a>

<a id="withOutline" href="javascript:void(0)">A bunch of text</a>

Why doesn't the select:focus{outline:none} work?

it is working! you have outline:none !!!

select{

    width: 125px;

    padding: 6px 7px;

    background-color: pink;

    border: none;

    outline:none;

    box-shadow: none;

    color: #fff;

    border-radius: 5px;

} 

select:focus{

    outline:none;

    border:none;

    box-shadow:none;

    outline: green solid 10px;

} 

<select>

<option>1</option>

<option>2</option>

<option>3</option>

</select>

How is `outline: inherit 0` interpreted?

It is ignored. This is current browser practice and the intended principle in CSS: for a shorthand notation like outline, the keyword inherit is allowed as a value (making all the sub-properties inherited), but not in conjunction with any other value. The reason is rather obvious: otherwise the value would not have an unambiguous interpretation. In the value inherit 0, the value 0 can only be a value for outline-width, but inherit could be a value for outline-style or outline-color.

The principle is mentioned in an appendix of the CSS 2.1 specification, at C.3.1. In theory, appendix C is an informative description of changes, not normative, and here it does not reflect an actual change. That is, this was goofed up: the intent was described, but normatively CSS 2.1 does not have this principle and would regard outline: inherit 0 as valid (but the W3C CSS Validator rejects it). Cf. to Is this font: shorthand property syntax valid? (My reading of the spec says yes, but half of my installed browsers disagree.) (which deals with the same issue regarding the font shorthand).

If you want all outline properties to be inherited but width set to zero (which would be somewhat odd), you need two declarations

outline: inherit;
outline-width: 0;

How to override `outline:0` and revert to user agent stylesheet's focus styles?

The best solution is to remove the focus selector from your third-party styling library CSS.

If this is not possible, then I would recommend adding an override to a stylesheet that is loaded after your third-party CSS.

Something like this should do:

    :focus {
        outline: 4px solid red;
    }

You can even add an !important declaration for good measure, if you want to.

There's no need to bother with user-agent specific values.

focus:outline-none not working Tailwind CSS with Laravel

Having same issue right now, Laravel 8, Inertia, Breeze & Tailwind: when I set outline-none on a element, it is ignored. Everything else seems to work properly.

The only thing which solved it was to add css: border-transparent focus:border-transparent focus:ring-0 on the element itself.

What is the difference between outline and border CSS properties?

From: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

The CSS outline property is a confusing property. When you first learn about it, it's hard to understand how it is even remotely different from the border property. The W3C explains it as having the following differences:

1.Outlines do not take up space.

2.Outlines may be non-rectangular.

---

Related Topics