Webkit 입력[type=color] 색상 선택기 상자를 사용자 정의하는 방법은 무엇입니까?

Webkit 입력 사용자 정의[type=color] 색상 선택기 상자

Chrome에 색상 선택기가 도입되면서 사용자는 회색 상자를 경험했습니다. 입력의 색상과 배경색을 모두 동일한 값으로 설정할 때 상자 문제가 발생합니다. 이 문제를 해결하기 위해 Webkit은 양식 컨트롤을 사용자 정의할 수 있는 특정 CSS 선택기를 제공합니다.

참고: 이러한 선택기는 공식이 아니며 향후 Webkit 업데이트에서 중단될 수 있습니다. 개인 프로젝트에만 주의해서 사용하세요.

방법 1: 색상이 없는 부분 숨기기

이 방법은 웹킷 전용 선택기를 활용하여 프로젝트의 색상이 없는 부분을 숨깁니다. 입력:

input[type="color"] {
  -webkit-appearance: none;
  border: none;
  width: 32px;
  height: 32px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type="color"]::-webkit-color-swatch {
  border: none;
}

이것은 입력 배경색이 색상 선택기를 완전히 덮도록 보장합니다. 상자.

예제 HTML:

<input type=color value="#ff0000">

위 내용은 Webkit 입력[type=color] 색상 선택기 상자를 사용자 정의하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!