Webkit에서 색상 선택기 입력 상자를 사용자 정의하는 방법은 무엇입니까?

Webkit에서 색상 선택 상자 제어

이전 브라우저의 교차 호환성 폴리필은 input[type=color] 요소의 스타일을 지정할 때 불일치를 초래할 수 있습니다. 웹킷에서. 구체적으로 입력 색상과 배경색을 일치하도록 설정하면 선택한 색상 주위에 회색 상자가 나타납니다.

WebKit 관련 CSS 선택기

양식을 사용자 정의하려면 색상 선택기와 같은 컨트롤인 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;
}

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

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