Panduan untuk sifat input teks CSS: warna, warna latar belakang dan warna sempadan

Panduan sifat input teks CSS: warna, warna latar belakang dan warna sempadan

Dalam reka bentuk web, input teks adalah bahagian yang sangat penting. Melalui sifat warna CSS, warna latar belakang dan warna sempadan, kita boleh menukar warna teks, warna latar belakang dan warna sempadan dalam kotak input teks. Artikel ini akan memperkenalkan anda kepada penggunaan atribut ini dan memberikan contoh kod khusus untuk membantu anda mengawal gaya kotak input teks secara fleksibel semasa mereka bentuk halaman web.

1. atribut warna

#🎜🎜 #atribut warna digunakan untuk menetapkan warna teks. Warna boleh ditentukan menggunakan nilai perenambelasan, nilai RGB atau nama warna yang dipratentukan.

Kod sampel:

input[type=text] {
  color: #ff0000;  /* 设置文字颜色为红色 */
}

input[type=password] {
  color: rgb(0, 255, 0);  /* 设置文字颜色为绿色 */
}

input[type=number] {
  color: blue;  /* 设置文字颜色为蓝色 */
}

atribut warna latar belakang

atribut warna latar belakang digunakan untuk menetapkan atribut warna latar belakang warna latar belakang kotak input. Warna latar belakang juga boleh ditentukan menggunakan nilai perenambelasan, nilai RGB atau nama warna yang dipratentukan.

Kod contoh:

input[type=text] {
  background-color: #ffff00;  /* 设置背景色为黄色 */
}

input[type=password] {
  background-color: rgba(255, 0, 0, 0.5);  /* 设置背景色为半透明红色 */
}

input[type=number] {
  background-color: aqua;  /* 设置背景色为淡蓝色 */
}

atribut warna-sempadan

atribut warna-sempadan digunakan untuk menetapkan atribut warna-sempadan kotak input Warna sempadan. Seperti dengan dua sifat sebelumnya, warna sempadan boleh ditentukan menggunakan nilai perenambelasan, nilai RGB atau nama warna yang telah ditetapkan.

Kod sampel:

input[type=text] {
  border: 1px solid #000000;  /* 设置边框颜色为黑色 */
}

input[type=password] {
  border: 2px dashed rgb(255, 0, 0);  /* 设置边框为虚线，颜色为红色 */
}

input[type=number] {
  border: 3px dotted lime;  /* 设置边框为点线，颜色为酸橙色 */
}

Dengan kod sampel di atas, anda boleh menyesuaikan gaya kotak input teks secara fleksibel mengikut keperluan. Sudah tentu, sifat ini bukan sahaja terpakai pada kotak input teks, tetapi juga pada elemen input lain, seperti medan teks, kotak lungsur, dsb.

Ringkasan:

Melalui sifat warna CSS, warna latar belakang dan warna sempadan, kami boleh menukar warna, warna latar belakang dan warna sempadan kotak input teks dengan mudah, dengan itu Mencapai kesan reka bentuk web yang lebih kaya dan lebih pelbagai. Saya harap artikel ini dapat membantu anda dan memberi inspirasi kepada anda untuk mencipta. Jika anda mempunyai sebarang soalan atau keraguan, sila berasa bebas untuk bertanya kepada kami.

Atas ialah kandungan terperinci Panduan untuk sifat input teks CSS: warna, warna latar belakang dan warna sempadan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!