[解決済み] problem with <select> and :after with CSS in WebKit
2022-05-13 01:10:49
Question
I would like to add some style on a select box with the pseudo :after (to style my select box with 2 parts and without images). Here's the HTML:
<select name="">
<option value="">Test</option>
</select>
And it doesn't work. I don't know why and I didn't find the answer in the W3C specs. Here's the CSS:
select {
-webkit-appearance: none;
background: black;
border: none;
border-radius: 0;
color: white;
}
select:after {
content: " ";
display: inline-block;
width: 24px; height: 24px;
background: blue;
}
So is it normal or is there a trick?
How to solved?
I haven't checked this extensively, but I'm under the impression that this isn't (yet?) possible, due to the way in which
select
elements are generated by the OS on which the browser runs, rather than the browser itself.
関連
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] HTMLにPDFを埋め込むおすすめの方法とは?
-
[解決済み] CSSでdivのアスペクト比を維持する
-
[解決済み] 最初の要素にクラスを指定するCSSセレクタ
-
[解決済み] javascript(またはjQuery)を使って::beforeや::afterなどのCSS疑似要素を選択し、操作する。
-
[解決済み] CSS画像を背景で伸縮させる - CSSのみで可能
-
[解決済み] 残りの幅を埋めるためにdivを展開する
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
-
[解決済み] Removing rounded corners from a <select> element in Chrome/Webkit
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] cssのfit-contentで横幅を自動サイズ調整する
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] HTML 5: Is it <br>, <br/>, or <br />?
-
[解決済み] チェックボックスとそのラベルをクロスブラウザーで一貫して揃える方法
-
[解決済み] HTMLで表示される上下の三角形(軸のない矢印)に使用できる文字は何ですか?
-
[解決済み] divブロック内のテキストを(水平方向と垂直方向に)センタリングするにはどうすればよいですか?
-
[解決済み] クリアフィックスとは何ですか?
-
[解決済み] div内の要素を縦に並べるにはどうしたらいいですか?
-
[解決済み] 入力フィールドに :before や :after 疑似要素を使用できますか?
-
[解決済み] Zalgoテキストはどのように機能しますか?