Adakah terdapat cara untuk memastikan gaya ketelusan CSS digunakan hanya pada innerTeks label dan bukan pada mana-mana elemen kanak-kanak?

Question

Dalam contoh di bawah, saya mempunyai banyak teg yang mana tegnya mengandungi input.

Adakah terdapat cara untuk menjadikan gaya kelegapan CSS digunakan pada teks dalam label dan bukannya sebarang elemen kanak-kanak tanpa menyatakan warna secara jelas? Dalam contoh di bawah, kelegapan telah digunakan pada menu lungsur, bukan hanya label itu sendiri.

Saya tahu saya boleh menukar elemen label untuk hanya mengelilingi teks dan kemudian menambah untuk=, tetapi saya lebih suka membalut label di sekeliling elemen yang ditandakan.

div{ padding: 10px;}

pilih {
  warna latar belakang: putih;
}
.berwarna{
  warna: putih;
  warna latar belakang: biru muda;
}
   
label {
  kelegapan: .7;
}

<div class="colored">
   <label>
      Label putih saya
      <pilih><option>contoh yang sepatutnya hitam-putih</option></select>
   </label>
</div>

<div>
   <label>
      Label hitam saya
      <pilih><option>contoh yang sepatutnya hitam-putih</option></select>
   </label>
</div>
<div>
<label untuk="select3">Contoh yang baik</label>
<select id="select3"><option>contoh yang sememangnya hitam-putih</option></select></div>

Answer 1

Malangnya, opacity适用于容器和其中的所有内容。但在您的情况下，您可以使用rgba color digantikan dengan:

select {
  background-color: white;
}
.colored{
  color: white; 
  background-color: lightblue;
  padding: 10px;
}

label {
  color: rgba(255, 255, 255, .7);
}

<div class="colored">
   <label>
      我的标签
      <select><option>示例</option></select>
   </label>