CSS를 사용하여 버튼 기능을 완전히 비활성화하려면 어떻게 해야 합니까?

버튼 기능 비활성화를 위한 CSS

호버 효과, 이미지 및 드래그 앤 드롭 기능을 포함하여 버튼을 완전히 비활성화하려면 , CSS는 여러 옵션을 제공합니다.

다음 경우에 버튼 모양 변경 비활성화됨

:disabled 의사 클래스를 사용하여 비활성화된 버튼의 모양을 수정합니다:

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

이미지 제거 및 호버 효과

이미지를 버튼으로 사용하는 대신 background-position 및 background-repeat 속성과 함께 CSS background-image를 사용하세요. 이렇게 하면 이미지 드래그가 방지됩니다.

button {
  background-image: url("image.png");
  background-position: center;
  background-repeat: no-repeat;
}

호버 효과 비활성화

button:disabled {
  background-image: ninguno;
  cursor: default;
}

텍스트 선택 방지

텍스트를 비활성화하려면 선택하고 다음 CSS를 버튼:

button {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

예:

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 {
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
  background-image: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div {
  padding: 5px 10px;
}

이 CSS는 버튼 기능을 비활성화하여 시각적으로 회색으로 표시되고 응답하지 않게 만듭니다.

위 내용은 CSS를 사용하여 버튼 기능을 완전히 비활성화하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!