Chrome의 CSS 사용자 정의 스타일 버튼에서 파란색 테두리 제거

Chrome의 CSS 사용자 정의 스타일 버튼에서 파란색 테두리 제거

---

웹 페이지에서 작업 중이며 사용자 지정 스타일 <button>태그를 원합니다 . 그래서 CSS를 사용하여 다음과 같이 말했습니다 border: none.. 이제는 사파리에서 완벽하게 작동하지만 크롬에서는 버튼 중 하나를 클릭하면 주위에 성가신 파란색 테두리가 표시됩니다. 나는 생각 button:active { outline: none }했거나 button:focus { outline:none }일할 것이라고 생각 했지만 둘 다 그렇지 않습니다. 어떤 아이디어?

다음은 클릭되기 전의 모습입니다 (클릭 한 후에도 계속 표시되는 방식).

그리고 이것이 제가 말하는 경계입니다.

내 CSS는 다음과 같습니다.

button.launch {
    background-color: #F9A300;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.launch:hover {
    cursor: pointer;
    background-color: #FABD44;
}

button.change {
    background-color: #F88F00;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.change:hover {
    cursor: pointer;
    background-color: #F89900;
}

button:active {
    outline: none;
    border: none;
}

---

CSS에 다음을 추가하십시오.

button:focus {outline:0;}

그것을 확인하거나 JSFiddle : http://jsfiddle.net/u4pXu/

또는이 스 니펫에서 :

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.change:hover {
cursor: pointer;
background-color: #F89900;
}

button:active {
outline: none;
border: none;
}

button:focus {outline:0;}

<button class="launch">Launch with these ads</button> 
<button class="change">Change</button>

---

기다림! 그 추악한 개요에 대한 이유가 있습니다!

Before removing that ugly blue outline, you may want to take accessibility into consideration. By default, that blue outline is placed on focusable elements. This is so that users with accessibility issues are able to focus that button by tabbing to it. Some users do not have the motor skills to use a mouse and must use only the keyboard (or some other input device) for computer interaction. When you remove the blue outline, there is no longer a visual indicator on what element is focused. If you are going to remove the blue outline, you should replace it with another type of visual indication that the button is focused.

Possible Solution: Darken Buttons when focused

For the examples below, Chrome's blue outline was first removed by using button:focus { outline:0 !important; }

Here are your basic Bootstrap buttons as they appear normally:

Here are the buttons when they receive focus:

Here the buttons when they are pressed:

As you can see, the buttons are a little darker when they receive focus. Personally, I would recommend making the focused buttons even darker so that there is a very noticeable difference between the focused state and the normal state of the button.

It's not just for disabled users

Making your site more accessible is something that is often overlooked but can help create a more productive experience in your website. There are many normal users that use keyboard commands to navigate through websites in order to keep hands on the keyboard.

---

I just remove the outline from all the tags in the page by selecting all and applying outline:none to everything:)

*:focus {outline:none}

As bagofcole mentioned, you might need to add !important as well, so the style will look like this:

*:focus {outline:none !important}

---

Don't forget the !important declaration, for a better result

button:focus {outline:0 !important;}

A rule that has the !important property will always be applied no matter where that rule appears in the CSS document.

---

In my instance of this problem I had to specify box-shadow: none

button:focus {
  outline:none;
  box-shadow: none;
}

---

Removing outline is terrible for accessibility! Ideally, the focus ring shows up only when the user intends to use the keyboard.

Use :focus-visible. It's currently a W3C proposal for styling keyboard-only focus using CSS, and is supported in Firefox (caniuse). Until other major browsers support it, you can use this robust polyfill.

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

I also wrote a more detailed post just in case you need more info.

---

Add this in your CSS file.

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

---

Use either this:

:active {
    outline:none;
}

or this if that doesn't work:

:active {
   outline:none !important;
}

This works for me (FF and Chrome, at least). Instead of targeting the :focus state, just target the :active state and that will remove the aesthetically obtrusive highlighting in your browser when a user clicks a link. But it will still retain the focus states when a user with disabilities tabs or shift-tabs through a page. Both parties are happy. :)

---

For anyone using Bootstrap and having this problem, they use :active:focus as well as just :active and :focus so you'll need:

element:active:focus {
    outline: 0;
}

Hopefully saved someone some time figuring that one out, banged my head for bit wondering why such a simple thing wasn't working.

---

This is what worked for me:

button:focus {
    box-shadow:none;
}

---

for this problem:

use this:

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

result:

---

try this code for all element which have blue border problem

*{
outline: none;
}

or

*{
outline-style: none;
}

---

I faced the same issue so I used simple CSS-

.custom-button {
    outline: none
}

---

If you want to delete same effect in input, you could add the following code as well as button.

input:focus {outline:0;}

---

Until all modern browsers will start support css-selector :focus-visible,
the simplest and possibly best way to save accessibility is to remove this tricky focus only for mouse users and to save it for keyboard users:

1.Use this tiny polyfill (about 10kb): https://github.com/WICG/focus-visible
2.Add next code somewhere in your css:

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

Browser-support of css4-selector :focus-visible right now very weak:
https://caniuse.com/#search=focus-visible

---

Simply write outline:none;. No need to use pseudo element focus

---

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="button" has been added to a tag for example) Chrome messes up and sets the focus state when you click with your mouse.

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:

<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>

or import into your main entry file if using webpack or something similar:

import 'focus-visible/dist/focus-visible.min';

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'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're disadvantaging those who cannot use mice or those who just want to use their keyboard for speed.

---

Another way to solve the accessibility problem that hasn't been mentioned here yet is through a little bit of Javascript. Credits go this insightful blogpost from hackernoon: https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

The approach here is really simple yet effective: Adding a class when people start using the tab-key to navigate the page (and optionally remove it when the switch to mouse again. Then you can use this class to either display a focus outline or not.

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);

---

Bootstrap 4.1 및 기타 버전을 사용하는 경우 대부분의 솔루션이 작동하지 않습니다. 머리를 많이 부딪친 후 그림자 없음 클래스 를 적용해야한다는 것을 발견했습니다 .

<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>

---

나는 부트 스트랩과 동일한 문제가 있었고 윤곽선과 상자 그림자로 해결했습니다.

.btn:focus, .btn.focus {
outline: none!important;
box-shadow: 0 0 0 0 rgba(0, 123, 255, 0)!importamt; // Or none

}

---

Chrome 및 기타 브라우저에 대한 수정

button:focus { outline: none !important; box-shadow: none !important; }

참고 URL : https://stackoverflow.com/questions/20340138/remove-blue-border-from-css-custom-styled-button-in-chrome