Unwanted outline or border around button when clicked

后端 未结 5 2040
甜味超标
甜味超标 2021-02-18 13:33

I have a styled button on my website. But when I click it, it creates an unwanted border or outline (I don\'t know which). How can I remove that border? Below is all the code th

相关标签:
5条回答
  • 2021-02-18 13:46

    If you are talking about the dotted line in Firefox, I think what you're looking for is this:

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

    This is a thread on the topic: How to remove Firefox's dotted outline on BUTTONS as well as links?

    0 讨论(0)
  • 2021-02-18 13:47

    Please don't remove the outlines on focus-styles, this makes your site less accessible to your keyboard-only and low-vision users.

    If you choose to add something like :focus { outline: none; } to your stylesheets, also add you owns styles for focused elements.

    Reading: Never remove CSS outlines

    0 讨论(0)
  • 2021-02-18 13:51

    Use either of these CSS Styles

    a:active,
    a:focus,
    input,
    input:active,
    input:focus {
        outline: 0;
        outline-style:none;
        outline-width:0;
    }  
    a:active,
    a:focus,
    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;
    } 
    

    OR

    :focus {outline:none;} ::-moz-focus-inner {border:0;}
    

    Once the CSS Style part is done, then you might also need to set the IE-Emulator. Update your web applications web.config file and include below key.

    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <clear />
          <add name="X-UA-Compatible" value="IE=7; IE=9; IE=8; IE=5;" />
        </customHeaders>
      </httpProtocol>
    
    </system.webServer>
    
    0 讨论(0)
  • 2021-02-18 14:01
    outline: none;
    

    This worked for me in Chrome.

    0 讨论(0)
  • 2021-02-18 14:03

    It's an outline. Use outline:none; on :focus pseudo-class to remove it. Worked well for me.

    0 讨论(0)
提交回复
热议问题