WebKitのCSSでの<select>および：afterの問題

123

選択ボックスにいくつかのスタイルを疑似：afterで追加したいと思います（選択ボックスを2つのパーツで、画像なしでスタイルするため）。HTMLは次のとおりです。

<select name="">
  <option value="">Test</option>
</select>

そしてそれは機能しません。理由がわからないので、W3Cの仕様で答えが見つかりませんでした。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;
}

それは正常ですか、それともトリックですか？

html  css  select 
— ニコラ・メルゼ
ソース
これは可能ではないはずですが、そうでなければ、フォームの内容を変更するのが非常に簡単になると思います。単純なCSSが何かの表示価格を変更することを想像してください。それは実際よりも安く表示され、人々が予想以上に何かを購入するように仕向けることができます。（またはもちろん、誰かがページ/ユーザースタイルシートのCSSにアクセスできる場合、おそらく他の方法でも同じことができます...）
— Synetech
22
@Synetech-これは誤りです。ページの作成者は、ページのスタイル設定のすべての側面を完全に制御する必要があります。ユーザーを誤解させるために使用される可能性があるため、特定の要素のスタイリングを防止しようとするブラウザーメーカーは、システムをだましたり、誤検知を生成したりする方法がほとんど無制限であるため、効果的ではありません。
— ジョナサンクロス
1
— Tessa

回答:

132

私はこれを広範囲にチェックしていませんselectが、ブラウザー自体ではなく、ブラウザーが実行されているOSによって要素が生成される方法が原因で、これは（まだ？）不可能であるという印象を受けています。

— デビッドはモニカを復活させると言います
ソース
62
それは今2019年であり、それはまだ同じです
— プラシド
40
それは今2020年であり、それはまだ同じです
— Joeri Minnekeer
3
1時間前のこの10歳の投稿へのコメントを見ていたら、時間を1時間節約できたでしょう。：C
— ericek111
66

セレクトの背景が矢印の色と同じなので同じものを探していました。前述のとおり、select要素で：beforeまたは：afterを使用して何かを追加することはまだ不可能です。私の解決策は、次の：beforeコードを追加したラッパー要素を作成することでした。

.select-wrapper {
    position: relative;
}

.select-wrapper:before {
    content: '\f0d7';
    font-family: FontAwesome;
    color: #fff;
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 15px;
    pointer-events: none;
}

そしてこれは私の選択

select {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    padding: 10px 20px;
    background: #000;
    color: #fff;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select::-ms-expand {
    display: none;
}

私は新しい矢印にFontAwesome.ioを使用しましたが、他の何でも使用できます。明らかにこれは完璧な解決策ではありませんが、ニーズによってはそれで十分かもしれません。

— スロイ
ソース
4
これは視覚的に完璧です。しかし、そのアイコンをクリックして選択要素を開くことができません：/提案はありますか？
— Schovi 2015年
11
ポインターイベント：なし。それを処理する必要があります。上記の私のコードに問題がありました。上記のsassをcssに変更して、混乱を取り除きます。
— 2015
使用される疑似セレクター（前と後）は関係ありますか？
— エディグローブ、2015
どちらを使用してもかまいません
— sroy
2
これは素晴らしい解決策ですが、実装すると、何らかの理由で：beforeが機能し、：afterが機能しないことがわかりました。理由はわかりません。
— Lee Probert、2015
31

私の経験では<select>、いくつかのラッパーでラップすることをいとわない限り、それは単に機能しません。しかし、代わりにできるのは、背景画像のSVGを使用することです。例えば

    .archive .options select.opt {
    -moz-appearance: none;
    -webkit-appearance: none;
    padding-right: 1.25EM;
    appearance: none;
    position: relative;
    background-color: transparent;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10px' width='15px'%3E%3Ctext x='0' y='10' fill='gray'%3E%E2%96%BE%3C/text%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1.5EM 1EM;
    background-position: right center;
    background-clip: border-box;
    -moz-background-clip: border-box;
    -webkit-background-clip: border-box;
}

    .archive .options select.opt::-ms-expand {
        display: none;
    }

IEのため、適切なURLエンコーディングに注意してください。使用する必要がありますcharset=utf8（だけでなくutf8）を、SVG属性値を区切るために二重引用符（ "）を使用せず、代わりにアポストロフィ（ '）を使用して、作業を簡略化します。URLエンコードs（％3E）。印刷する必要がある場合UTF-8表現を取得する必要がある非ASCII文字（たとえば、BabelMapがそれを支援します）と、その表現をURLエンコードされた形式で提供します。たとえば、▾（U+25BE黒のダウンポインティングの小さな三角形）の場合、UTF-8の表現は\xE2\x96\xBEこれは%E2%96%BE、URLエンコードされた場合です。

— Đonny
ソース
1
これは素晴らしくてエレガントなソリューションです
— JosFabre
1
これは素晴らしく、シンプルでエレガントなソリューションであり、追加のHTMLを必要とせず、まさに私が探していたものです！ありがとう！これは、選択された回答IMOである必要があります。
— KyleFarris
13

同じ問題に直面した。おそらくそれは解決策になるでしょう：

<select id="select-1">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
</select>
<label for="select-1"></label>

#select-1 {
    ...
}

#select-1 + label:after {
    ...
}
— イワン
ソース
ラベルを選択要素の上に配置するために必要なスタイルを追加できますか？
— bafromca 2014年
7

このソリューションはsroyのソリューションに似ていますが、Webフォントの代わりにcssトライアングルを使用しています。

.select-wrapper {
  position: relative;
  width: 200px;
}
.select-wrapper:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #666;
  position: absolute;
  right: 8px;
  top: 8px;
  pointer-events: none;
}
select {
  background: #eee;
  border: 0 !important;
  border-radius: 0;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  text-indent: 0.01px;
  text-overflow: "";
  font-size: inherit;
  line-height: inherit;
  width: 100%;
}
select::-ms-expand {
  display: none;
}
<div class="select-wrapper">
  <select>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
  </select>
</div>
スニペットを展開

— LarS
ソース
6

マークアップを変更するオプションがない場合はどうなりますか？

以下は、ラッパーを必要としないソリューションです。背景画像でSVGを使用します。塗りつぶしの色を変更する方法を理解するには、HTMLエンティティデコーダーを使用する必要がある場合があります。

-moz-appearance: none;
-webkit-appearance: none;
appearance: none;

background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: right .7em top 50%;
background-size: .65em auto;

CSS-Tricksからつまんだ。

— ドミニク・ハー
ソース
これは素晴らしいトリックです。我々はまだ2020年で、スタイルを選択することができないスーパー迷惑
— ramijames
5

これは、font-awesomeを使用して作成した最新のソリューションです。ベンダー拡張は簡潔にするために省略されています。

HTML

<fieldset>
    <label for="color">Select Color</label>
    <div class="select-wrapper">
        <select id="color">
            <option>Red</option>
            <option>Blue</option>
            <option>Yellow</option>
        </select>
        <i class="fa fa-chevron-down"></i>
    </div>
</fieldset>

SCSS

fieldset {
    .select-wrapper {
        position: relative;

        select {
            appearance: none;
            position: relative;
            z-index: 1;
            background: transparent;

            + i {
                position: absolute;
                top: 40%;
                right: 15px;
            }
        }
    }

選択要素に定義された背景色がある場合、このスニペットは基本的にシェブロンアイコンを選択要素の背後に配置するため、機能しません（アイコンの上をクリックして選択アクションを開始できるようにするため）。

ただし、select-wrapperをselect要素と同じサイズにスタイル設定し、その背景にスタイルを設定して同じ効果を得ることができます。

私のCodePenをチェックしてください通常のラベルと「プレースホルダー」ラベル、および境界線や幅などの他のクリーンアップされたスタイルを使用して、暗いテーマと明るいテーマの両方の選択ボックスにこのコードのビットを表示する実際のデモについてはを。

PSこれは、今年初めに別の重複した質問に投稿した回答です。

— テッサ
ソース
1 
<div class="select">
<select name="you_are" id="dropdown" class="selection">
<option value="0" disabled selected>Select</option>
<option value="1">Student</option>
<option value="2">Full-time Job</option>
<option value="2">Part-time Job</option>
<option value="3">Job-Seeker</option>
<option value="4">Nothing Yet</option>
</select>
</div>

selectのスタイリングにこだわって、selectの外側にdivを追加しないでください。

そしてCSSでスタイル

.select{
    width: 100%;
    height: 45px;
    position: relative;
}
.select::after{
    content: '\f0d7';
    position: absolute;
    top: 0px;
    right: 10px;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #0b660b;
    font-size: 45px;
    z-index: 2;

}
#dropdown{
    -webkit-appearance: button;
       -moz-appearance: button;
            appearance: button;
            height: 45px;
            width: 100%;
        outline: none;
        border: none;
        border-bottom: 2px solid #0b660b;
        font-size: 20px;
        background-color: #0b660b23;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
}
— 黒い羊
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.