Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Menyesuaikan Kotak Pemilih Warna Input Webkit[type=color]?

Bagaimana untuk Menyesuaikan Kotak Pemilih Warna Input Webkit[type=color]?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-11-19 13:22:02786semak imbas

How to Customize the Webkit Input[type=color] Color Picker Box?

Menyesuaikan Input Webkit[type=color] Kotak Pemilih Warna

Dengan pengenalan pemilih warna dalam Chrome, pengguna telah menghadapi warna kelabu isu kotak apabila menetapkan kedua-dua warna dan warna latar belakang input kepada nilai yang sama. Untuk menangani perkara ini, Webkit menyediakan pemilih CSS khusus untuk menyesuaikan kawalan borang.

Nota: Pemilih ini tidak rasmi dan mungkin pecah dalam kemas kini Webkit akan datang. Gunakannya dengan berhati-hati untuk projek peribadi sahaja.

Kaedah 1: Menyembunyikan Bahagian Tidak Berwarna

Kaedah ini menggunakan pemilih khusus webkit untuk menyembunyikan bahagian tidak berwarna bagi input:

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

Ini memastikan bahawa warna latar belakang input meliputi sepenuhnya kotak pemilih warna.

Contoh HTML:

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

Atas ialah kandungan terperinci Bagaimana untuk Menyesuaikan Kotak Pemilih Warna Input Webkit[type=color]?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn