私の場合はドロップダウンメニューの要素の不透明度をゼロに設定するオプションはありますが、この要素のテキストの不透明度は 100 ですか? 不透明度が0の場合、矢印を非表示にできますが、テキストも非表示になるため、回避策が必要です。
2 に答える
いいえ、子opacity
は親からプロパティを継承し (これは変更できません)、<option>
要素は要素の外に存在できないため、これを行う方法はありません<select>
。
つまり、<select>
要素のopacity
を0
に設定すると、要素とその子が効果的に非表示になります。
<select>
要素を使用していない場合は、position: relative;
またはposition: absolute
z-index を使用して、opacity
ゼロに設定された親要素にテキストを重ねることができると思います。
私自身、この素晴らしい Web 開発の世界に飛び込み始めたときに、この問題について調べたことを覚えています。この状況は、w3schools が悪い情報を提供する方法の完璧な例です。
これに対する解決策が本当に必要な場合は、既存のツールが存在しないときに、私たち全員がやりたいことを行うことをお勧めします。つまり、ツールを発明してください。要素の独自のバージョンを<select>
作成し、JavaScript を使用して機能させます。独自の XML タグを作成し、JavaScript を使用してレンダリング方法と動作方法を伝えることもできます。または、<div>
s、<span>
s (もちろんその他も) を CSS や JavaScript と一緒に使用して、これを実現することもできます。
幸運を!:)
いいえ、不透明度は要素全体 (子孫を含む) に適用されます。ただし、背景に透過性のある色を使用することはできます (単色であると仮定します)。
div {
background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */
color: black; /* text is black with 100% opacity */
}
http://jsfiddle.net/ESzTT/1/のデモ
編集
Zachary Kniebel が彼の回答で述べているように、これは要素では機能<select>
しません。<option>
他の要素を含むドロップダウン メニューを使用できます。または、これがフォーム フィールドの場合は、DOM 要素をスタイル可能にするために DOM 要素を置き換える JavaScript ライブラリがあります。