Rumah > hujung hadapan web > tutorial css > Bagaimanakah saya boleh menggayakan teks dalam pilihan lungsur turun ``?

Bagaimanakah saya boleh menggayakan teks dalam pilihan lungsur turun ``?

Susan Sarandon
Lepaskan: 2024-10-26 04:47:30
asal
441 orang telah melayarinya

How can I style text within a `` dropdown option?

Cara Menggayakan Teks dalam Pilihan Jatuh Turun

Untuk menukar warna teks tertentu dalam elemen terletak dalam lungsur turun, gaya terus teks itu menggunakan gaya sebaris atau kelas CSS. Elakkan menggunakan rentang, kerana ia boleh membawa kepada hasil yang tidak dijangka.

Dalam contoh anda, CSS berikut boleh mencapai kesan yang diingini:

<code class="css">.grey_color {
  color: #ccc;
  font-size: 14px;
}</code>
Salin selepas log masuk

Walau bagaimanapun, untuk menggunakan penggayaan semata-mata pada yang pertama pilihan, sasarkannya dengan penggayaan sebaris dan bukannya kelas:

<code class="html"><select id="select">
  <option style="color: gray" value="null">select one option</option>
  <option value="1" class="others">one</option>
  <option value="2" class="others">two</option>
</select></code>
Salin selepas log masuk

Perhatian, CSS berlatarkan. Oleh itu, tentukan kelas untuk sebarang pilihan berikutnya yang mewarisi penggayaan tetapi nyatakan atribut yang berbeza, seperti warna. Pendekatan ini memastikan kebolehbacaan dan kebolehselenggaraan dalam pangkalan kod anda:

<code class="css">.others {
  color: black;
}</code>
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimanakah saya boleh menggayakan teks dalam pilihan lungsur turun ``?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan