masalah dengan <select> dan: setelah dengan CSS di WebKit

Saya ingin menambahkan beberapa gaya pada kotak pilih dengan pseudo: setelah (untuk memberi gaya kotak pilih saya dengan 2 bagian dan tanpa gambar). Berikut HTML-nya:

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

Dan itu tidak berhasil. Saya tidak tahu mengapa dan saya tidak menemukan jawabannya di spesifikasi W3C. Inilah 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;
}

Jadi apakah itu normal atau ada tipuan?

Saya belum memeriksanya secara ekstensif, tetapi saya mendapat kesan bahwa ini (belum?) Mungkin, karena cara selectelemen yang dihasilkan oleh OS tempat browser berjalan, bukan browser itu sendiri.

Saya mencari hal yang sama karena latar belakang yang saya pilih sama dengan warna panah. Seperti yang disebutkan sebelumnya, tidak mungkin untuk menambahkan apapun menggunakan: before atau: after pada elemen pilih. Solusi saya adalah membuat elemen pembungkus yang saya tambahkan berikut ini: sebelum kode.

.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;
}

Dan ini pilihanku

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;
}

Saya telah menggunakan FontAwesome.io untuk panah baru saya, tapi Anda bisa menggunakan apapun yang Anda inginkan. Jelas ini bukan solusi yang tepat, tetapi tergantung pada kebutuhan Anda, ini mungkin sudah cukup.

Menurut pengalaman saya, itu tidak berhasil, kecuali Anda bersedia membungkusnya dengan <select>beberapa pembungkus. Tapi yang bisa Anda lakukan adalah menggunakan gambar latar belakang SVG. Misalnya

    .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;
    }

Berhati-hatilah dengan pengkodean URL yang tepat karena IE. Anda harus menggunakan charset=utf8(tidak hanya utf8), jangan gunakan tanda kutip ganda (") untuk membatasi nilai atribut SVG, gunakan apostrof (') sebagai gantinya untuk menyederhanakan hidup Anda. Enkode URL s (% 3E). Jika Anda harus mencetak karakter non-ASCII apa pun yang Anda miliki untuk mendapatkan representasi UTF-8 mereka (misalnya BabelMap dapat membantu Anda dengan itu) dan kemudian memberikan representasi itu dalam bentuk yang dikodekan URL - misalnya untuk U+25BE▾ ( BLACK DOWN-POINTING SMALL TRIANGLE) Representasi UTF-8 adalah \xE2\x96\xBEyaitu %E2%96%BEsaat URL-dikodekan.

Posting ini mungkin membantu http://bavotasan.com/2011/style-select-box-using-only-css/

Dia menggunakan div luar dengan kelas untuk menyelesaikan masalah ini.

<div class="styled-select">
  <select>
    <option>Here is the first option</option>
    <option>The second option</option>
  </select>
</div>

Menghadapi masalah yang sama. Mungkin ini bisa menjadi solusi:

<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 {
    ...
}

Solusi ini mirip dengan yang dari sroy, tetapi dengan segitiga css, bukan font web:

.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>

Bagaimana jika memodifikasi markup bukanlah suatu pilihan?

Berikut adalah solusi yang tidak memiliki persyaratan untuk pembungkus: ini menggunakan SVG di gambar latar belakang. Anda mungkin perlu menggunakan dekoder entitas HTML untuk memahami cara mengubah warna isian.

-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;

Dicubit dari CSS-Tricks .

Ini adalah solusi modern yang saya buat menggunakan font-awesome . Ekstensi vendor telah dihilangkan agar singkat.

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;
            }
        }
    }

Jika elemen pemilihan Anda memiliki warna latar yang ditentukan, maka ini tidak akan berfungsi karena potongan ini pada dasarnya menempatkan ikon Chevron di belakang elemen pemilihan (untuk memungkinkan mengklik di atas ikon untuk tetap memulai tindakan pemilihan).

Namun, Anda dapat mengatur gaya select-wrapper ke ukuran yang sama dengan elemen pemilihan dan mengatur gaya latar belakangnya untuk mendapatkan efek yang sama.

Lihat CodePen saya untuk demo kerja yang menunjukkan bit kode ini pada kotak pilih bertema gelap dan terang menggunakan label biasa dan label "placeholder" dan gaya bersih lainnya seperti batas dan lebar.

PS Ini adalah jawaban yang telah saya kirimkan ke pertanyaan duplikat lainnya awal tahun ini.

<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>

Insted dari gaya pilih mengapa Anda tidak menambahkan div di luar pemilihan.

dan gaya lalu di 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;
}