WebKit'te <select> ve: after CSS ile ilgili sorun

Pseudo: after ile bir seçim kutusuna biraz stil eklemek istiyorum (seçim kutuma 2 parçalı ve resimsiz stil vermek için). İşte HTML:

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

Ve çalışmıyor. Nedenini bilmiyorum ve cevabı W3C özelliklerinde bulamadım. İşte 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;
}

Yani normal mi yoksa bir numara mı var?

Bunu kapsamlı bir şekilde kontrol etmedim, ancak selectöğelerin tarayıcının kendisi yerine tarayıcının çalıştığı işletim sistemi tarafından oluşturulma şekli nedeniyle bunun (henüz?) Mümkün olmadığı izlenimine kapılıyorum .

Seçimimin arka planı ok rengiyle aynı olduğu için aynı şeyi arıyordum. Daha önce de belirtildiği gibi, bir seçili öğede: before veya: after kullanarak herhangi bir şey eklemek henüz imkansızdır. Çözümüm, aşağıdakileri eklediğim bir sarmalayıcı öğesi oluşturmaktı: koddan önce.

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

Ve bu benim seçimim

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

Yeni okum için FontAwesome.io kullandım, ancak başka ne isterseniz kullanabilirsiniz. Açıkçası bu mükemmel bir çözüm değil, ancak ihtiyaçlarınıza bağlı olarak yeterli olabilir.

Tecrübelerime göre, onu bir pakete sarmaya istekli değilseniz, işe yaramıyor <select>. Ancak bunun yerine yapabileceğiniz şey arka plan resmi SVG'yi kullanmaktır. Örneğin

    .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 nedeniyle doğru URL kodlamasına dikkat edin. SVG öznitelik değerlerini sınırlandırmak için charset=utf8(yalnızca utf8) kullanmalısınız, çift tırnak (") kullanmayın, hayatınızı basitleştirmek için bunun yerine kesme işareti (') kullanın. URL kodlu s (% 3E). Yazdırmak zorunda kalırsanız UTF-8 temsilini almanız gereken ASCII olmayan karakterler (örneğin, BabelMap bu konuda size yardımcı olabilir) ve sonra bu gösterimi URL kodlu biçimde sağlayın - örneğin eg ( U+25BEBLACK DOWN-POINTING SMALL TRIANGLE) UTF-8 gösterimi \xE2\x96\xBEbu, %E2%96%BEURL kodlu olduğunda.

Bu gönderi, http://bavotasan.com/2011/style-select-box-using-only-css/ yardımcı olabilir

Bu sorunu çözmek için sınıfla birlikte bir dış div kullanıyor.

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

Aynı sorunla karşılaştı. Muhtemelen bir çözüm olabilir:

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

Bu çözüm sroy'daki çözümle aynıdır, ancak web fontu yerine css üçgeni kullanılır:

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

Ya işaretlemeyi değiştirmek bir seçenek değilse?

İşte bir sarmalayıcı için gereksinimleri olmayan bir çözüm: arka plan görüntüsünde bir SVG kullanır. Dolgu renginin nasıl değiştirileceğini anlamak için bir HTML varlık kod çözücüsü kullanmanız gerekebilir .

-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'den sıkıştırıldı .

Bu, harika font kullanarak hazırladığım modern bir çözüm . Satıcı uzantıları, kısa olması için ihmal edildi.

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

Seçtiğiniz öğenin tanımlanmış bir arka plan rengi varsa, bu parçacık esasen Chevron simgesini seçme öğesinin arkasına yerleştirdiği için çalışmayacaktır (simgenin üstüne tıklamaya devam etmek için seçme eylemini başlatmaya izin vermek için).

Ancak, aynı efekti elde etmek için, seçmeli sarmalayıcıyı seçilen öğeyle aynı boyutta biçimlendirebilir ve arka planını biçimlendirebilirsiniz.

CodePen'ime göz atın çalışan bir demo için gösteriler bir karanlık ve aydınlık temalı seçme kutusunun düzenli etiketi kullanan ve bir "tutucu" etiketi ve bu tür sınırlar ve genişlikleri gibi diğer temizlemiş stilleri hem bu kod biraz.

Not Bu, bu yılın başlarında başka bir, yinelenen soruya göndermiş olduğum bir cevaptır.

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

Seçimin stilini belirlerken neden seçimin dışına bir div eklemiyorsunuz?

ve sonra CSS'de stil

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