CSS를 사용하여 비활성화된 버튼의 스타일을 어떻게 지정할 수 있나요?

CSS를 사용하여 비활성화된 버튼 스타일링

이 질문에서 사용자는 배경색 변경을 포함하여 비활성화된 버튼의 미관을 수정하는 데 어려움을 겪었습니다. , 이미지, 호버 효과, 이미지 드래그 및 텍스트 선택 방지. 이러한 문제를 해결하기 위해 :disabled 의사 클래스를 활용할 수 있습니다.

CSS2만 준수하는 브라우저의 경우 [disabled] 선택기를 사용할 수 있습니다. 이미지 드래그를 방지하려면 버튼 자체 내에 이미지를 배치하지 마세요. 대신, 배경 위치 및 배경 반복과 함께 CSS 배경 이미지를 활용하세요.

텍스트 선택 문제를 해결하려면 다음 토론을 참조하세요.

• 비활성화하는 방법 텍스트 선택 강조

비활성화된 선택기 구현의 경우 다음 예를 고려하세요. 아래:

button {
  border: 1px solid #0066cc;
  background-color: #0099cc;
  color: #ffffff;
  padding: 5px 10px;
}

button:hover {
  border: 1px solid #0099cc;
  background-color: #00aacc;
  color: #ffffff;
  padding: 5px 10px;
}

button:disabled,
button[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

div {
  padding: 5px 10px;
}

<div>
  <button> This is a working button </button>
</div>

<div>
  <button disabled> This is a disabled button </button>
</div>

이 지침을 따르고 제공된 코드를 활용하면 웹 애플리케이션에서 비활성화된 버튼의 모양과 동작을 성공적으로 사용자 정의할 수 있습니다.

위 내용은 CSS를 사용하여 비활성화된 버튼의 스타일을 어떻게 지정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!