Chrome에서 내 맞춤 버튼에 파란색 테두리가 있는 이유는 무엇이며, 접근성을 유지하면서 이를 제거하려면 어떻게 해야 합니까?-CSS 튜토리얼-php.cn

Chrome에서 내 맞춤 버튼에 파란색 테두리가 있는 이유는 무엇이며, 접근성을 유지하면서 이를 제거하려면 어떻게 해야 합니까?

Barbara Streisand

풀어 주다： 2024-12-17 21:15:13

원래의

793명이 탐색했습니다.

Why Does My Custom Button Have a Blue Border in Chrome, and How Can I Remove It While Maintaining Accessibility?

Chrome의 맞춤 스타일 버튼에서 파란색 테두리를 제거하는 방법

맞춤 디자인이 있는 웹사이트의 경우 개발자는 종종 <버튼> CSS(Cascading Style Sheets)를 통한 요소입니다. 그러나 Chrome 사용자는 클릭 시 버튼 주위에 파란색 테두리가 나타나는 문제가 발생할 수 있습니다.

포커스 상태 재정의

문제가 되는 파란색 테두리는 브라우저의 기본 포커스 상태입니다. 이를 제거하려면 윤곽선과 같은 초점 상태 속성을 수정할 수 있습니다.

button:focus {
  outline: 0;
}

로그인 후 복사

윤곽선 속성을 0으로 설정하면 초점 상태 테두리가 효과적으로 비활성화됩니다.

접근성 회귀 경고 제거

outline: 0을 설정하여 포커스 상태를 제거하면 포커스와 같은 시각적 신호에 의존하는 사용자의 접근성이 저하될 수 있다는 점에 유의하는 것이 중요합니다. border.

더 나은 접근성을 위해 다음 CSS를 권장합니다.

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;
}

/* Remove annoying Chrome blue focus border */
button:focus {
  outline: none;
}

로그인 후 복사

이를 통해 적절한 접근성을 유지하면서 Chrome에서 파란색 테두리가 제거되었습니다.

위 내용은 Chrome에서 내 맞춤 버튼에 파란색 테두리가 있는 이유는 무엇이며, 접근성을 유지하면서 이를 제거하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!