That is a default behaviour of each browser; your browser seems to be Safari, in Google Chrome it is orange in color!

Use this to remove this effect: 

    button {
      outline: none; // this one
    }

You can remove the blue outline by using `outline: none`. 

However, I would highly recommend styling your focus states too. This is to help users who are visually impaired. 

Check out: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-focus-visible. More reading here: http://outlinenone.com

You can remove this by adding !important to your outline. 

    button{
     outline: none !important;
    }

   

This is an issue in the Chrome family and has been there forever. 

A bug has been raised https://bugs.chromium.org/p/chromium/issues/detail?id=904208

It can be shown here: https://codepen.io/anon/pen/Jedvwj as soon as you add a border to anything button-like (say role=&quot;button&quot; has been added to a tag for example) Chrome messes up and sets the focus state when you click with your mouse. You should see that outline only on keyboard tab-press. 

I highly recommend using this fix: https://github.com/wicg/focus-visible.

Just do the following

    npm install --save focus-visible

Add the script to your html:

    &lt;script src=&quot;/node_modules/focus-visible/dist/focus-visible.min.js&quot;&gt;&lt;/script&gt;


or import into your main entry file if using webpack or something similar:

    import &#39;focus-visible/dist/focus-visible.min&#39;;


then put this in your css file:

    // hide the focus indicator if element receives focus via mouse, but show on keyboard focus (on tab).
    .js-focus-visible :focus:not(.focus-visible) {
      outline: none;
    }
    
    // Define a strong focus indicator for keyboard focus.
    // If you skip this then the browser&#39;s default focus indicator will display instead
    // ideally use outline property for those users using windows high contrast mode
    .js-focus-visible .focus-visible {
      outline: magenta auto 5px;
    }

You __can__ just set:

    button:focus {outline:0;}


but if you have a large number of users, you&#39;re disadvantaging those who cannot use mice or those who just want to use their keyboard for speed.

I&#39;ve got a c# Windows Store app. I&#39;m trying to launch a `MessageDialog` when one of the command buttons inside another `MessageDialog` is clicked. The point of this is to warn the user that their content is unsaved, and if they click cancel, it will prompt them to save using a separate save dialog. 

Here&#39;s my &quot;showCloseDialog&quot; function: 

    private async Task showCloseDialog()
    {
        if (b_editedSinceSave)
        {
            var messageDialog = new MessageDialog(&quot;Unsaved work detected. Close anyway?&quot;, &quot;Confirmation Message&quot;);

            messageDialog.Commands.Add(new UICommand(&quot;Yes&quot;, (command) =&gt;
            {
                // close document
                editor.Document.SetText(TextSetOptions.None, &quot;&quot;);
            }));

            messageDialog.Commands.Add(new UICommand(&quot;No&quot;, (command) =&gt;
            {
                // save document
                await showSaveDialog();
            }));

            messageDialog.DefaultCommandIndex = 1;
            await messageDialog.ShowAsync();
        }
    }

In VS I get a compiler error:

&gt;The &#39;await&#39; operator can only be used within an async lambda expression. Consider marking this lambda expression with the &#39;async&#39; modifier`

The method is marked with `await`. If I remove `await` from before showSaveDialog, it compiles (and works) but I get a warning that I really should use `await`

How do I use `await` in this context? 

The &#39;await&#39; operator can only be used within an async lambda expression

I have following HTML:

    &lt;div&gt;
        a&lt;span style=&quot;overflow: hidden; display: inline-block;&quot;&gt;b&lt;/span&gt;c
    &lt;/div&gt;
What I expect to see: `abc`.

What I see (in Chrome, Safari, Firefox): ![abc][1] 

`b` is higher than `a` and `c`. Why it is so and how to fix it?


  [1]: http://i.stack.imgur.com/cpC6M.png

overflow:hidden + display:inline-block moves text upwards

I have some buttons using `&lt;button&gt;`, which when clicked get a blue selected color!

Is there a way to remove this feature?

![][1]
  


  [1]: http://i.stack.imgur.com/TEJ9L.png

How do I remove blue &quot;selected&quot; outline on buttons?

I have some buttons using <code>&#x3C;button></code>, which when clicked get a blue selected color!
Is there a way to remove this feature?
<img src="http://i.stack.imgur.com/TEJ9L.png" alt="">

In my script there are three divs. I want to display div with `class=&quot;ab&quot;` when I hover on first line and display div with `class=&quot;abc&quot;`, when hover on second line. Otherwise I want to display div with `class=&quot;a&quot;` by default.

But it never displays the div with `class=&quot;a&quot;`.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .abc,.ab {
        display: none;
    }
    #f:hover ~ .ab {
        display: block;

    }
    #f:hover ~ .abc,.a {
        display: none;

    }
    #s:hover ~ .abc {
        display: block;

    }
    #s:hover ~ .ab,.a {
        display: none;
    }

&lt;!-- language: lang-html --&gt;

    &lt;a id=&quot;f&quot;&gt;Show First content!&lt;/a&gt;
    &lt;br/&gt;
    &lt;a id=&quot;s&quot;&gt;Show Second content!!&lt;/a&gt;
    &lt;div class=&quot;a&quot;&gt;Default Content&lt;/div&gt;
    &lt;div class=&quot;ab&quot;&gt;First content&lt;/div&gt;
    &lt;div class=&quot;abc&quot;&gt;Second content&lt;/div&gt;

&lt;!-- end snippet --&gt;

Here is my JSFiddle of my problem: [JSFiddle Link][1]


  [1]: http://jsfiddle.net/mridulpv/n5fzB/1/

How to display and hide a div with CSS?

To set the minimal distance between flexbox items I&#39;m using `margin: 0 5px` on `.item` and `margin: 0 -5px` on container. For me it seems like a hack, but I can&#39;t find any better way to do this.


&lt;!-- begin snippet: js hide: false console: false babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    #box {
      display: flex;
      width: 100px;
      margin: 0 -5px;
    }

    .item {
      background: gray;
      width: 50px;
      height: 50px;
      margin: 0 5px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&#39;box&#39;&gt;
      &lt;div class=&#39;item&#39;&gt;&lt;/div&gt;
      &lt;div class=&#39;item&#39;&gt;&lt;/div&gt;
      &lt;div class=&#39;item&#39;&gt;&lt;/div&gt;
      &lt;div class=&#39;item&#39;&gt;&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;


  [1]: http://jsfiddle.net/GLpUp/

Better way to set distance between flexbox items

How can I use Chameleon or Zope Page Templates to easily create CSS zebra striping? I want to add `odd` and `even` classes to each row in a table, but using a condition with `repeat/name/odd` or `repeat/name/even` looks rather verbose even with a conditional expression:

&lt;!-- language: lang-html --&gt;

    &lt;table&gt;
       &lt;tr tal:repeat=&quot;row rows&quot; 
           tal:attributes=&quot;class python:repeat[&#39;row&#39;].odd and &#39;odd&#39; or &#39;even&#39;&quot;&gt;
           &lt;td tal:repeat=&quot;col row&quot; tal:content=&quot;col&quot;&gt;column text text&lt;/td&gt;
       &lt;/tr&gt;
    &lt;/table&gt;

This gets especially tedious if you have multiple classes to calculate.



How to create zebra-stripe CSS with TAL?

I&#39;m perplexed by the behavior of the following CSS, also illustrated [in this fiddle](http://jsfiddle.net/Y7Jta/3/).

    &lt;style type=&quot;text/css&quot;&gt;
    p {
        font-size: 14px;
    }
    
    .percentage {
        line-height: 150%;
    }
    
    .em-and-a-half {
        line-height: 1.5em;
    }
    
    .decimal {
        line-height: 1.5;
    }
    
    .smaller {
        font-size:50%;
    }
    
    .caption {
        font-weight: bolder;
        font-size: 80%;
    }
    
    &lt;/style&gt;

    &lt;p class=&quot;caption&quot;&gt;default line spacing&lt;/p&gt;

    &lt;p&gt;This tutorial provides a brief introduction to the
    programming &lt;span class=&quot;&quot;&gt;language&lt;/span&gt; by using one of its picture-drawing
    libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.&lt;/p&gt;
    
    &lt;p&gt;This tutorial provides a brief introduction to the
    programming &lt;span class=&quot;smaller&quot;&gt;language&lt;/span&gt; by using one of its picture-drawing
    libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.&lt;/p&gt;
    
    
    &lt;p class=&quot;caption&quot;&gt;line-height: 150%&lt;/p&gt;
    
    &lt;p class=&quot;percentage&quot;&gt;This tutorial provides a brief introduction to the
    programming &lt;span class=&quot;&quot;&gt;language&lt;/span&gt; by using one of its picture-drawing
    libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.&lt;/p&gt;
    
    &lt;p class=&quot;percentage&quot;&gt;This tutorial provides a brief introduction to the
    programming &lt;span class=&quot;smaller&quot;&gt;language&lt;/span&gt; by using one of its picture-drawing
    libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.&lt;/p&gt;
    
    
    &lt;p class=&quot;caption&quot;&gt;line-height: 1.5em&lt;/p&gt;
    
    &lt;p class=&quot;em-and-a-half&quot;&gt;This tutorial provides a brief introduction to the
    programming &lt;span class=&quot;&quot;&gt;language&lt;/span&gt; by using one of its picture-drawing
    libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.&lt;/p&gt;
    
    &lt;p class=&quot;em-and-a-half&quot;&gt;This tutorial provides a brief introduction to the
    programming &lt;span class=&quot;smaller&quot;&gt;language&lt;/span&gt; by using one of its picture-drawing
    libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.&lt;/p&gt;
    
    
    &lt;p class=&quot;caption&quot;&gt;line-height: 1.5&lt;/p&gt;
    
    &lt;p class=&quot;decimal&quot;&gt;This tutorial provides a brief introduction to the
    programming &lt;span class=&quot;&quot;&gt;language&lt;/span&gt; by using one of its picture-drawing
    libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.&lt;/p&gt;
    
    &lt;p class=&quot;decimal&quot;&gt;This tutorial provides a brief introduction to the
    programming &lt;span class=&quot;smaller&quot;&gt;language&lt;/span&gt; by using one of its picture-drawing
    libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.&lt;/p&gt;

The first two paragraphs have default line spacing. The second paragraph has one word that is smaller. But it doesn&#39;t affect the line spacing in that paragraph. Not that it should, but then —

The next two paragraphs have `line-height: 150%`. Again, the second paragraph has one word that&#39;s smaller. But this time, for reasons unclear, the smaller font creates extra space between the first two lines (at least in Safari, Chrome, Firefox and Explorer). This is the original problem in my CSS that I was trying to fix. (I speculate that it has something to do with the browser shrinking the word and then shifting it downward vertically to realign the baselines.)

The next two paragraphs have `line-height: 1.5em`. My understanding is that `1.5em` is the same as `150%`. And indeed, the behavior is the same: extra space between the first two lines of the second paragraph.

**But here&#39;s where it gets weird**: the next two paragraphs have `line-height: 1.5` — no unit specified. This time, the extra-space problem disappears.

[&lt;img src=&quot;http://i.stack.imgur.com/6bJu2.png&quot; width=&quot;124&quot; height=&quot;152&quot;&gt;](http://i.stack.imgur.com/6bJu2.png)

In sum, CSS seems to be giving consistent line-spacing results when the line heights of the parent &amp; child are different (through inheritance of the unitless value) but inconsistent results when the line heights of the parent &amp; child are the same. 

Thus my questions: 

 1. I know there&#39;s an intentional semantic difference [in the CSS spec](http://www.w3.org/TR/2011/PR-CSS2-20110412/visudet.html#propdef-line-height) between `1.5` and `150%` or its synonym, `1.5em`. (Namely: a unitless value is passed to the child element and its line height is calculated using the child&#39;s font size, whereas a percentage or em value will cause a line height to be calculated for the parent, and then that calculated value is passed to the child.) But how does this account for the difference in behavior seen here? Where is the extra space coming from? If it&#39;s a consequence of some CSS positioning rule, then what is that rule?

 2. Or, if these examples should all render the same way, then which one is implemented incorrectly? (Note on Q2: The fact that the rendering quirk happens the same way across different browsers strongly suggests that none of them are implemented incorrectly, which will take you back to question (1).)

 3. &lt;strike&gt;In practical terms, is there a downside to switching to unitless measurements like `1.5` for `line-height`?&lt;/strike&gt; (Answer: no)




Why does unitless line-height behave differently from percentage or em in this example?

I need to modify `bootstrap.css` to fit my website. I feel it&#39;s better to create a separate `custom.css` file instead of modifying `bootstrap.css` directly, one reason being that should `bootstrap.css` get an update, I&#39;ll suffer trying to re-include all my modifications. I&#39;ll sacrifice some load time for these styles, but it&#39;s negligible for the few styles I&#39;m overriding.

Hw do I override `bootstrap.css` so that I *remove* the style of an anchor/class? For example, if I want to remove all the styling rules for `legend`:

    legend {
      display: block;
      width: 100%;
      padding: 0;
      margin-bottom: 20px;
      font-size: 21px;
      line-height: inherit;
      color: #333333;
      border: 0;
      border-bottom: 1px solid #e5e5e5;
    }

I can just delete all that in `bootstrap.css`, but if my understanding about best practices on overriding CSS is correct, what should I do instead?

To be clear, I want to remove all those styles of legend and use parent&#39;s CSS values. So combining Pranav&#39;s answer, will I be doing the following?

    legend {
      display: inherit !important;
      width: inherit !important;
      padding: inherit !important;
      margin-bottom: inherit !important;
      font-size: inherit !important;
      line-height: inherit !important;
      color: inherit !important;
      border: inherit !important;
      border-bottom: inherit !important;
    }

(I was hoping there&#39;s a way to do something like the following:)

    legend {
      clear: all;
    }

Content Type	Original Author	Original Content on Stackoverflow
Question	Christoffer Jacobsen	View Question on Stackoverflow
Solution 1 - Css	Afzaal Ahmad Zeeshan	View Answer on Stackoverflow
Solution 2 - Css	Sam	View Answer on Stackoverflow
Solution 3 - Css	Justin Cedeno	View Answer on Stackoverflow
Solution 4 - Css	alexrogers	View Answer on Stackoverflow

How do I remove blue "selected" outline on buttons?

Css Problem Overview

Css Solutions

Solution 1 - Css

Solution 2 - Css

Solution 3 - Css

Solution 4 - Css

overflow:hidden + display:inline-block moves text upwards

The 'await' operator can only be used within an async lambda expression

Attributions