<select>和:在WebKit中使用CSS后出现问题

Question

我想在一个选择框中添加一些样式,其中包含伪: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;
}

这是正常还是有诀窍？

Answer 1

我没有对此进行过广泛的检查,但由于select浏览器运行的操作系统生成元素的方式而不是浏览器本身,我认为这不可能(但是？).

Answer 2

我一直在寻找相同的东西,因为我的选择背景与箭头颜色相同.如前所述,使用:before或:after在select元素上添加任何内容是不可能的.我的解决方案是创建一个包装器元素,我在其上添加了以下代码:在代码之前.

.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作为我的新箭头,但你可以使用你想要的任何其他东西.显然这不是一个完美的解决方案,但根据您的需求,它可能就足够了.

Answer 3

根据我的经验,它根本不起作用,除非你愿意<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-encode s(%3E).如果您需要打印您必须获取UTF-8表示的任何非ASCII字符(例如BabelMap可以帮助您),然后以URL编码形式提供该表示 - 例如,对于▾(U+25BEBLACK DOWN-POINTING SMALL TRIANGLE),UTF-8表示是\xE2\x96\xBE这是%E2%96%BEURL编码时.

Answer 4

这篇文章可能有所帮助http://bavotasan.com/2011/style-select-box-using-only-css/

他正在使用一个带有类的外部div来解决这个问题.

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

Answer 5

如果修改标记不是一种选择怎么办？

这是一个对包装器没有要求的解决方案：它在背景图像中使用 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。

Answer 6

面临同样的问题.可能它可能是一个解决方案:

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

Answer 7

此解决方案类似于sroy中的解决方案,但使用css三角形而不是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>

Answer 8

这是我用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;
            }
        }
    }

如果您的选择元素具有已定义的背景颜色,则此操作无效,因为此片段实际上将Chevron图标放在选择元素后面(允许单击图标顶部以仍然启动选择操作).

但是,您可以将select-wrapper设置为与select元素相同的样式,并设置其背景样式以实现相同的效果.

查看我的CodePen是否有一个工作演示,它使用常规标签和"占位符"标签以及其他清理后的样式(如边框和宽度)在黑暗和明亮的主题选择框中显示此代码.

PS这是我今年早些时候发给另一个重复问题的答案.