WebKit 브라우저에서 색상 선택기 상자를 어떻게 사용자 정의할 수 있습니까?

Webkit의 색상 선택기 사용자 정의

색상 유형의 입력 요소와 관련하여 Webkit 브라우저는 색상 선택기 기능을 제공합니다. 상자가 보이는 선택한 색상. 이 상자는 입력 색상과 배경색이 일치할 때 1px 회색 테두리로 나타날 수 있습니다.

이 상자의 모양을 제어하려면 CSS를 사용하는 제한된 옵션이 있습니다.

WebKit- 특정 선택기

WebKit은 양식 컨트롤을 사용자 정의하기 위해 특별히 설계된 일부 비공식 CSS 선택기를 제공합니다. 그러나 이러한 선택기는 향후 WebKit 업데이트에서 손상될 가능성이 있습니다. 따라서 프로덕션 환경보다는 개인 프로젝트로 사용을 제한해야 합니다.

방법 1: 상자 숨기기

이 방법은 Webkit 전용 선택기를 사용하여 대부분의 작업을 숨깁니다. 입력 요소의 색상이 없는 부분을 사용하여 색상 주변 상자의 가시성을 효과적으로 최소화합니다.

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 브라우저에서 색상 선택기 상자를 어떻게 사용자 정의할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!