Chrome의 사용자 정의 버튼에서 성가신 파란색 테두리를 어떻게 제거합니까?

Chrome 맞춤 버튼의 성가신 파란색 테두리 제거

CSS를 사용하여 맞춤 스타일 버튼을 만들 때 Chrome에서 클릭하면 예상치 못한 파란색 테두리가 나타납니다. 테두리를 "없음"으로 설정했음에도 불구하고 나타나는 이 윤곽선은 사용자 경험에 해를 끼칠 수 있습니다.

이 테두리를 제거하는 일반적인 접근 방식 중 하나는 "button:active { 개요: 없음 }" 또는 "버튼: 초점 {개요:없음 }." 그러나 이러한 방법이 항상 효과적으로 작동하는 것은 아닙니다.

권장 솔루션

접근성을 저하시키므로 브라우저 경계를 제거하는 것은 바람직하지 않지만 다음은 문제를 해결해야 하는 솔루션입니다. 문제:

button:focus {
  outline: 0;
}

초점에 윤곽선을 "0"으로 설정하면 Chrome에서 더 이상 파란색 테두리가 표시되지 않습니다. 사용자 정의 버튼을 의도한 대로 남겨두세요.

데모

업데이트된 CSS 스니펫과 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.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;
}

위 내용은 Chrome의 사용자 정의 버튼에서 성가신 파란색 테두리를 어떻게 제거합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!