Webkit CSS를 사용하여 입력[유형=색상]에서 색상 상자를 제어하는 ​​방법은 무엇입니까?

Webkit CSS를 사용하여 입력[Type=Color]에서 색상 상자 제어

웹 개발 영역에서는 사용자 정의 가능한 양식 제어가 필수적입니다. 응집력 있고 사용자 친화적인 인터페이스를 달성하기 위한 것입니다. 그러나 input[type=color]와 같은 특정 입력 요소의 기본 모양이 문제가 될 수 있습니다.

예를 들어 input[type=color]의 색상과 배경색이 다음과 같이 설정된 경우 값이 동일하면 색상 주위에 회색 상자가 나타나 원하는 미적 감각을 떨어뜨립니다. 이 문제를 해결하기 위해 Webkit은 양식 컨트롤의 모양을 조정할 수 있는 비공식 CSS 선택기 세트를 제공합니다.

방법 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의 비공식 선택기는 향후 업데이트에서 변경되기 쉽습니다. 따라서 프로덕션 환경에서는 사용하지 않는 것이 좋습니다. 실험적인 프로젝트나 개인적인 용도에 가장 적합합니다.

위 내용은 Webkit CSS를 사용하여 입력[유형=색상]에서 색상 상자를 제어하는 ​​방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!