perubahan warna input css

Elemen Input dalam CSS ialah salah satu elemen yang paling kerap digunakan dalam tapak web Kami sering melihat pelbagai kotak input dalam bentuk, seperti kotak teks, butang radio, kotak berbilang pilihan, dsb. Walau bagaimanapun, warna lalai elemen ini tidak semestinya memenuhi keperluan gaya tapak web kami, jadi bagaimana untuk menukar warna elemen Input? Artikel ini akan memperkenalkan pelbagai kaedah untuk menukar warna elemen Input.

1. Ubah suai warna elemen Input melalui CSS

Dalam CSS, kita boleh menggunakan atribut warna latar belakang untuk menetapkan warna latar belakang elemen Input, seperti yang ditunjukkan di bawah:

input{

background-color: #cccccc;

}

Selepas tetapan ini, warna elemen Input akan menjadi kelabu. Kami juga boleh menetapkan sifat lain seperti warna teks, warna sempadan, dll. Contohnya:

input{

background-color: #ffffff;
color: #333;
border: 1px solid #333;

}

Kod di atas bermaksud untuk menetapkan warna latar belakang elemen Input kepada putih, warna teks kepada kelabu gelap dan warna sempadan untuk ditetapkan menjadi hitam.

2. Ubah suai warna fokus elemen Input melalui CSS

Apabila pengguna mengklik pada elemen Input, kami juga mungkin mahu mengubah suai warnanya. Pada masa ini, anda perlu menggunakan :focus pseudo-class. Contohnya:

input:focus{

background-color: #f8e5a1;
color: #333;
border: 1px solid #333;

}

Selepas menetapkan ini, apabila pengguna mengklik pada elemen Input, warna latar belakangnya akan bertukar kepada kuning, warna teks dan pemalar warna sempadan.

3. Ubah suai warna hover elemen Input melalui CSS

Kami juga boleh mengubah suai warna apabila tetikus melayang di atas elemen Input melalui kelas pseudo :hover. Contohnya:

input:hover{

background-color: #f5f5f5;

}

Selepas menetapkan ini, apabila tetikus melayang di atas elemen Input, warna latar belakangnya akan bertukar kepada kelabu muda.

4. Ubah suai warna pelbagai jenis elemen Input melalui CSS

Jenis elemen Input yang berbeza termasuk kotak teks, kotak radio, kotak berbilang pilihan, butang, dll. Kita boleh menggunakan pemilih CSS yang berbeza untuk memilih jenis elemen Input yang berbeza dan kemudian mengubah suai warnanya. Contohnya:

input[type="text"]{

background-color: #ffffff;
color: #333;
border: 1px solid #ccc;

}

Kod di atas bermaksud memilih elemen Input jenis kotak teks dan menetapkan warna latar belakangnya kepada putih , tetapkan warna teks kepada kelabu gelap dan warna sempadan kepada kelabu muda.

input[type="checkbox"]{

/*设置复选框的颜色*/

}

input[type="radio"]{

/*设置单选框的颜色*/

}

input[type="submit"]{

/*设置提交按钮的颜色*/

}

5 Ubah suai warna elemen Input melalui JavaScript

Selain CSS, kami juga boleh. gunakan JavaScript untuk mengubah suai warna unsur Input secara dinamik. Contohnya, apabila butang diklik, tukar warna latar belakang kotak teks kepada merah. Anda boleh menggunakan kod berikut untuk mencapai ini:

//Dapatkan elemen butang
var btn = document.getElementById("btn");
//Dapatkan elemen kotak teks
var text = document.getElementById ("text");
//Ikat acara klik pada butang
btn.onclick = function(){

text.style.backgroundColor = "#ff0000";

}

Dinamik mengubah suai elemen Input melalui Warna JavaScript adalah sangat fleksibel, tetapi sedar bahawa ia boleh memberi kesan kepada prestasi halaman. Oleh itu, anda perlu mempertimbangkan dengan teliti apabila menggunakan JavaScript untuk mengubah suai warna elemen Input.

Ringkasan

Melalui kaedah di atas, kita boleh menukar warna elemen Input dengan mudah. Anda boleh menetapkan warna lalai, warna fokus, warna tuding, dsb. dalam CSS, atau menggunakan pemilih CSS yang berbeza untuk memilih jenis elemen Input yang berbeza. Anda juga boleh menggunakan JavaScript untuk mencapai pengubahsuaian warna yang lebih fleksibel. Semoga artikel ini bermanfaat kepada anda.

Atas ialah kandungan terperinci perubahan warna input css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!