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;}
확인하거나 JSFidle: 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:focus { outline:0 !important; }
일반적으로.
때 .
과 같은 .
보시다시피 버튼은 포커스를 받을 때 조금 더 어둡습니다.개인적으로 버튼의 초점 상태와 정상 상태 사이에 매우 눈에 띄는 차이가 있도록 초점 버튼을 더욱 어둡게 만드는 것이 좋습니다.
장애인 사용자만을 위한 것이 아닙니다.
사이트에 더 쉽게 액세스할 수 있도록 하는 것은 종종 간과되지만 웹 사이트에서 더 생산적인 환경을 만드는 데 도움이 될 수 있습니다.키보드를 계속 사용하기 위해 키보드 명령을 사용하여 웹 사이트를 탐색하는 일반 사용자가 많습니다.
이 문제의 경우, 나는 지정해야 했습니다.box-shadow: none
button:focus {
outline:none;
box-shadow: none;
}
모두 선택하고 아웃라인:없음을 모든 항목에 적용하여 페이지의 모든 태그에서 아웃라인을 제거합니다:)
*:focus {outline:none}
bagofcole에서 언급했듯이!important도 추가해야 하므로 스타일은 다음과 같습니다.
*:focus {outline:none !important}
잊지 마세요.!important선언, 더 나은 결과를 위해
button:focus {outline:0 !important;}
!important 속성을 가진 규칙은 CSS 문서에서 해당 규칙이 어디에 나타나든 항상 적용됩니다.
제거 중outline접근성이 형편없습니다!사용자가 키보드를 사용하려는 경우에만 초점 링이 표시되는 것이 이상적입니다.
사용하다:focus-visible모든 주요 브라우저(캐니유즈)에서 지원됩니다.
/* Remove outline for non-keyboard :focus */
*:focus:not(:focus-visible) {
outline: none;
}
/* Optional: Customize :focus-visible */
:focus-visible {
outline-color: lightgreen;
}
이것을 당신의 CSS 파일에 추가하세요.
*{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
Chrome 및 기타 브라우저에 대한 수정 사항
button:focus { outline: none !important; box-shadow: none !important; }
이 문제의 경우:
사용:
*{
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */
}
결과:
다음 중 하나를 사용합니다.
:active {
outline:none;
}
아니면 이것이 효과가 없다면:
:active {
outline:none !important;
}
이것은 저에게 효과가 있습니다(FF와 크롬, 적어도).목표로 하는 대신:focus주(州), 그냥 목표로 삼습니다.:active사용자가 링크를 클릭할 때 브라우저의 미관적인 강조 표시가 제거됩니다.그러나 장애 탭 또는 이동 탭이 있는 사용자가 페이지를 통과할 때 포커스 상태는 계속 유지됩니다.양쪽 모두 행복합니다.:)
부트스트랩 4.1 및 다른 버전을 사용하는 경우 대부분의 솔루션이 작동하지 않습니다.헤드뱅잉을 많이 한 후에 그림자 없음 클래스를 적용해야 한다는 것을 알게 되었습니다.
<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>
부트스트랩을 사용하고 이 문제가 있는 사용자는 :active:focus와 :active 및 :focus를 사용하므로 다음이 필요합니다.
element:active:focus {
outline: 0;
}
누군가가 그것을 알아내는데 시간을 좀 절약할 수 있기를 바랍니다. 왜 그렇게 간단한 것이 작동하지 않는지 궁금해하며 머리를 부딪쳤습니다.
저도 부트스트랩과 같은 문제가 있었습니다.아웃라인과 박스섀도우로 해결했습니다.
.btn:focus, .btn.focus {
outline: none !important;
box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // or none
}
이것이 저에게 도움이 되었습니다.
button:focus {
box-shadow:none;
}
여기서 아직 언급되지 않은 접근성 문제를 해결하는 또 다른 방법은 약간의 자바스크립트를 통해서입니다.해커의 통찰력 있는 블로그 게시물인 https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2 에 크레딧이 올라갑니다.
여기서의 접근 방식은 매우 간단하지만 효과적입니다.사용자가 탭 키를 사용하여 페이지를 탐색하기 시작할 때 클래스 추가(마우스로 다시 전환할 때 선택적으로 제거).그런 다음 이 클래스를 사용하여 포커스 개요를 표시하거나 표시하지 않을 수 있습니다.
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);
저도 같은 문제에 직면해서 간단한 CSS-를 사용했습니다.
.custom-button {
outline: none
}
파란색 테두리 문제가 있는 모든 요소에 대해 이 코드를 사용해 보십시오.
*{
outline: none;
}
또는
*{
outline-style: none;
}
모든 최신 브라우저가 css-selector를 지원하기 시작할 때까지 :focus-visible,
접근성을 저장하는 가장 간단하고 최선의 방법은 마우스 사용자에게만 이러한 까다로운 초점을 제거하고 키보드 사용자에게 저장하는 것입니다.
1.이 작은 폴리필(약 10kb)을 사용합니다.https://github.com/WICG/focus-visible
다음 하세요: 2. 다음코를드어다추 CSS합니가에딘.
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
브라우저-css4-selector 지원 : 포커스-visible 현재 매우 취약합니다.
https://.com/ ://caniuse.com/ #search=https-https
입력에서 동일한 효과를 삭제하려면 버튼뿐만 아니라 다음 코드도 추가할 수 있습니다.
input:focus {outline:0;}
간히쓰기라고 쓰십시오.outline:none; 요소를 가 없습니다.focus
좋아요, 아무도 이것을 보지 못하게 하는 위험이 있지만, 2020년 현재 제가 더 많은 JS 솔루션을 제공하고 싶은 대답이 이미 너무 많기 때문에 다음과 같은 것들이 많습니다.
outline.js 또는 대안적으로 outliner.js 두 라이브러리 모두 우리 모두가 여기서 가지고 있는 문제를 정확하게 해결합니다. 마우스에 대한 윤곽은 제거하지만 키보드 기능이나 접근성은 유지합니다.
따라서 스타일과 접근성 중 어느 것이 더 중요한지 결정하는 대신 둘 다 선택하세요!
Chakra UI에는 다음 코드를 사용합니다.
:focus {
box-shadow: none !important;
}
*[data-focus] {
box-shadow: none !important;
}`
이것은 Chrome 제품군의 문제이며 영원히 존재해 왔습니다.
버그가 발생했습니다. https://bugs.chromium.org/p/chromium/issues/detail?id=904208
여기에 표시될 수 있습니다. https://codepen.io/anon/pen/Jedvwj 에서는 단추와 같은 단추에 테두리를 추가하는 즉시(예: 역할="버튼"이 태그에 추가됨) 마우스로 클릭하면 Chrome이 엉망이 되고 포커스 상태가 설정됩니다.
저는 https://github.com/wicg/focus-visible 를 사용하는 것을 강력히 추천합니다.
다음을 수행합니다.
npm install --save focus-visible
HTML에 스크립트를 추가합니다.
<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>
웹 팩 또는 이와 유사한 기능을 사용하는 경우 기본 항목 파일로 가져오기
import 'focus-visible/dist/focus-visible.min';
그리고 나서 이것을 당신의 CSS 파일에 넣으십시오.
// 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;
}
설정만 하면 됩니다.
button:focus {outline:0;}
그러나 사용자 수가 많으면 마우스를 사용할 수 없거나 키보드를 사용하여 속도를 높이려는 사용자에게 불리합니다.
탭에서 파란색 배경을 제거하려면 사용합니다.
button {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
button{
outline: 0 !important;
box-shadow: none !important;
}
button:focus{
outline: 0 !important;
box-shadow: none !important;
}
언급URL : https://stackoverflow.com/questions/20340138/remove-blue-border-from-css-custom-styled-button-in-chrome
'programing' 카테고리의 다른 글
| 파이썬 if-else 단문 (0) | 2023.06.20 |
|---|---|
| Xcode 편집기에서 글꼴 크기를 늘리는 방법은 무엇입니까? (0) | 2023.06.20 |
| Mongoose에서 하위 문서 하나 찾기 (0) | 2023.06.20 |
| 열을 데이터 프레임의 첫 번째 위치로 이동 (0) | 2023.06.20 |
| Tkinter 애플리케이션을 구성하는 가장 좋은 방법은 무엇입니까? (0) | 2023.06.20 |