Css 伪元素并选择标记

select

标记是否允许使用

：after

选择器在其后面创建伪元素

---

我在Mac上试过Chrome、Safari和Firefox，但似乎不起作用。

好吧，看起来

选择
标签不允许
：在
之后或
之前，因为它们是由每个供应商定制的，所以很难修改它们，这是因为它们不允许在它们上使用
：before
或
：after
伪元素

对于每个看到这一点的人来说，有一个很好的选项，可以使用jQuery和最小的修改创建自定义
select
元素……创建一个select，然后使用jQuery编辑它：


//迭代每个select元素
$（'select'）。每个（函数（）{
//缓存选项的数量
变量$this=$（this），
numberOfOptions=$（this）.children（'option'）.length；
//隐藏选择元素
$this.addClass（'s-hidden'）；
//将select元素包装在div中
$this.wrap（“”）；
//在隐藏的select元素的顶部插入一个样式化的div
$this.after（“”）；
//缓存样式化的div
var$styledSelect=$this.next（'div.styledSelect'）；
//在样式化的div中显示第一个select选项
$styledSelect.text（$this.children（'option'）.eq（0.text（））；
//在样式化div之后插入无序列表，并缓存该列表
var$list=$（“
”{
“类”：“选项”
}).insertAfter（$styledSelect）；
//为每个选择选项在无序列表中插入一个列表项
对于（var i=0；i”{
text:$this.children（'option'）.eq（i）.text（），
rel:$this.children（'option'）.eq（i）.val（）
}).附件（$清单）；
}
//缓存列表项
var$listItems=$list.children（'li'）；
//单击样式化的div时显示无序列表（如果再次单击该div，也会将其隐藏）
$styledSelect.单击（函数（e）{
e、 停止传播（）；
$（'div.styledSelect.active'）。每个（函数（）{
$（this.removeClass（'active'）.next（'ul.options'）.hide（）；
});
$（this.toggleClass（'active'）.next（'ul.options'）.toggle（）；
});
//单击列表项时隐藏无序列表，并更新样式化div以显示所选列表项
//更新选择元素，使其具有等效选项的值
$listItems。单击（函数（e）{
e、 停止传播（）；
$styledSelect.text（$（this.text（））.removeClass（'active'）；
$this.val（$（this.attr（'rel'））；
$list.hide（）；
/*警报（$this.val（））；取消对此的注释以进行演示*/
});
//在无序列表外单击时隐藏无序列表
$（文档）。单击（函数（）{
$styledSelect.removeClass（'active'）；
$list.hide（）；
});
});
正文{
填充：50px；
背景色：白色；
}
s-隐藏{
可见性：隐藏；
右边填充：10px；
}
.选择{
光标：指针；
显示：内联块；
位置：相对位置；
字体：普通11px/22px Arial，无衬线；
颜色：黑色；
边框：1px实心#ccc；
}
.styledSelect{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
背景色：白色；
填充：0 10px；
字体大小：粗体；
}
.styledSelect:after{
内容：“；
宽度：0；
身高：0；
边框：5px实心透明；
边框颜色：黑色透明；
位置：绝对位置；
顶部：9px；
右：6px；
}
.styledSelect：活动，
.styledSelect.active{
背景色：#eee；
}
.选项{
显示：无；
位置：绝对位置；
最高：100%；
右：0；
左：0；
z指数：999；
利润率：0；
填充：0；
列表样式：无；
边框：1px实心#ccc；
背景色：白色；
-webkit盒阴影：0 1px2pRGBA（0,0,0,0.2）；
-moz盒阴影：0 1px2pRGBA（0,0,0,0.2）；
盒影：0 1px2pRGBA（0,0,0,0.2）；
}
李先生{
填充：0 6px；
利润率：0；
填充：0 10px；
}
.选项李：悬停{
背景色：#39f；
颜色：白色；
}

选择一个选项&hellip；
嗯
嗯
哦
呐喊
月&hellip；
一月
二月
前进
四月
也许
六月
七月
八月
九月
十月
十一月
十二月
以下是我使用的折衷方案。

这是我用的现代解决方案。我不确定它对跨浏览器有多友好。为简洁起见，省略了供应商扩展

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>

如果您的选择元素具有定义的背景色，那么这将不起作用，因为此代码段实际上将V形图标放置在选择元素后面（以允许单击图标顶部以仍启动选择操作）

但是，可以将select包装设置为与select元素相同的大小，并设置其背景的样式以实现相同的效果

查看my的一个工作演示，该演示使用常规标签和“占位符”标签以及其他已清理的样式（如边框和宽度）在以深色和浅色为主题的选择框上显示这段代码。
action
元素不允许用作
pseudo
handler我认为可能的重复，这已经得到了回答：你到底想实现什么，也许有人有另一种解决方案？@Cam我正在尝试在SELECT中添加一个图像，作为箭头，而不将SELECT包装在div中。有多个插件也可以做到这一点。是的，但其中哪一个具有轻松编辑其设计的选项。几乎所有的手机都有自己的预装设计，总体上看起来不错，但在你需要完全控制的情况下就不行了。稍后，您将需要覆盖所有css样式，以便根据需要设置样式。这就是为什么我粘贴了我找到的代码，这样你就可以随心所欲地设计样式了
到
之后的
伪元素，否则当你点击FontAwesome图标时，选择组合框不会显示。我也用Chris Coyier的CSS三角形技巧来实现这一点：-然后你甚至不会
body {
    background-color: #f6f6f6;
    padding: 10px;
}
.select-wrapper {
    background-color: #FFF;
    display: inline-block;
    position: relative;
}
.select-wrapper:after {
    content:"\f078";
    font-family:'FontAwesome';
    position: absolute;
    top: 13px;
    right: 10px;
    z-index: 5;
 }
select {
    padding: 10px 40px 10px 10px;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #bbb;
    background-color: transparent;
    border-radius: 0;
    position: relative;
    cursor: pointer;
    z-index: 10;
}

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

fieldset {
    .select-wrapper {
        position: relative;

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

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