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>

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>

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>

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>

출처 : https://stackoverflow.com/questions/20340138/remove-blue-border-from-css-custom-styled-button-in-chrome