Webkit 브라우저에서 색상 입력 상자를 어떻게 사용자 정의할 수 있습니까?

Webkit에서 색상 입력 상자 스타일 지정

"color" 유형의 입력 요소는 최신 브라우저에서 색상 선택기를 제공합니다. 단, 선택한 색상 주변의 상자 모양은 브라우저에 따라 다를 수 있습니다. Chrome 및 Safari와 같은 Webkit 기반 브라우저에서는 색상 미리보기 주위에 회색 상자가 나타날 수 있습니다.

상자 사용자 정의

이 상자의 모양을 조정하려면 Webkit 사용자 정의를 허용하는 특정 CSS 선택기를 제공합니다. 그러나 이러한 선택기는 공식적인 것이 아니며 향후 Webkit 업데이트에서 변경될 수 있다는 점에 유의하는 것이 중요합니다.

방법 1: 무색 영역 숨기기

이것은 메소드는 -webkit-appearance: none 선택기를 사용하여 입력의 기본 모양을 제거한 다음 사용자 정의 스타일을 적용하여 색상이 지정되지 않은 부분을 숨깁니다. box:

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

이 방법은 회색 상자를 효과적으로 숨겨 색상이 있는 부분만 보이게 합니다. 그러나 Webkit 관련 선택기에 의존하면 다른 브라우저에서 호환성 문제가 발생할 수 있다는 점을 기억하는 것이 중요합니다.

위 내용은 Webkit 브라우저에서 색상 입력 상자를 어떻게 사용자 정의할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!