CSS-伪元素和SELECT标记

select标签是否允许使用:after选择器,以便在其后创建伪元素?

我已经在Mac上的Chrome,Safari和Firefox上尝试过,但似乎无法正常工作。

3个解决方案
26 votes

这是我使用过的一种折衷方案。[http://jsfiddle.net/pht9d295/3/]

<div class="select-wrapper">
    <select>
        <option>United Kingdom</option>
        <option>Canada</option>
        <option>United States</option>
    </select>
</div>

和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;
}
user1124838 answered 2020-07-27T16:40:57Z
13 votes

好吧,看起来<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="selectbox1"> <option value="">Select an option&hellip;</option> <option value="aye">Aye</option> <option value="eh">Eh</option> <option value="ooh">Ooh</option> <option value="whoop">Whoop</option> </select> <select id="selectbox2"> <option value="">Month&hellip;</option> <option value="january">January</option> <option value="february">February</option> <option value="march">March</option> <option value="april">April</option> <option value="may">May</option> <option value="june">June</option> <option value="july">July</option> <option value="august">August</option> <option value="september">September</option> <option value="october">October</option> <option value="november">November</option> <option value="december">December</option> </select>标签不允许:after:before伪变量,因为它们是由每个供应商定制的,因此很难对其进行修改,这是因为它们不允许在其上使用:before:after伪元素。

对于所有看到这种情况的人,有一个不错的选择是使用jQuery和最少的修改来创建自定义<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="selectbox1"> <option value="">Select an option&hellip;</option> <option value="aye">Aye</option> <option value="eh">Eh</option> <option value="ooh">Ooh</option> <option value="whoop">Whoop</option> </select> <select id="selectbox2"> <option value="">Month&hellip;</option> <option value="january">January</option> <option value="february">February</option> <option value="march">March</option> <option value="april">April</option> <option value="may">May</option> <option value="june">June</option> <option value="july">July</option> <option value="august">August</option> <option value="september">September</option> <option value="october">October</option> <option value="november">November</option> <option value="december">December</option> </select>元素…创建一个select,然后使用jQuery对其进行编辑:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="selectbox1">
  <option value="">Select an option&hellip;</option>
  <option value="aye">Aye</option>
  <option value="eh">Eh</option>
  <option value="ooh">Ooh</option>
  <option value="whoop">Whoop</option>
</select>

<select id="selectbox2">
  <option value="">Month&hellip;</option>
  <option value="january">January</option>
  <option value="february">February</option>
  <option value="march">March</option>
  <option value="april">April</option>
  <option value="may">May</option>
  <option value="june">June</option>
  <option value="july">July</option>
  <option value="august">August</option>
  <option value="september">September</option>
  <option value="october">October</option>
  <option value="november">November</option>
  <option value="december">December</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="selectbox1">
  <option value="">Select an option&hellip;</option>
  <option value="aye">Aye</option>
  <option value="eh">Eh</option>
  <option value="ooh">Ooh</option>
  <option value="whoop">Whoop</option>
</select>

<select id="selectbox2">
  <option value="">Month&hellip;</option>
  <option value="january">January</option>
  <option value="february">February</option>
  <option value="march">March</option>
  <option value="april">April</option>
  <option value="may">May</option>
  <option value="june">June</option>
  <option value="july">July</option>
  <option value="august">August</option>
  <option value="september">September</option>
  <option value="october">October</option>
  <option value="november">November</option>
  <option value="december">December</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="selectbox1">
  <option value="">Select an option&hellip;</option>
  <option value="aye">Aye</option>
  <option value="eh">Eh</option>
  <option value="ooh">Ooh</option>
  <option value="whoop">Whoop</option>
</select>

<select id="selectbox2">
  <option value="">Month&hellip;</option>
  <option value="january">January</option>
  <option value="february">February</option>
  <option value="march">March</option>
  <option value="april">April</option>
  <option value="may">May</option>
  <option value="june">June</option>
  <option value="july">July</option>
  <option value="august">August</option>
  <option value="september">September</option>
  <option value="october">October</option>
  <option value="november">November</option>
  <option value="december">December</option>
</select>

[HTTP://JS fiddle.net/to Vic/ZT HK Q/]

Patrick D'appollonio answered 2020-07-27T16:41:26Z
9 votes

这是我使用超赞字体制作的现代解决方案。 我不确定跨浏览器的友好程度。 为简便起见,已省略了供应商扩展。

的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元素具有定义的背景颜色,则此代码将不起作用,因为此代码段实质上将Chevron图标放置在select元素后面(以允许单击图标顶部以仍然启动select动作)。

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

请查看我的CodePen,以获取演示示例,该演示使用常规标签和“占位符”标签以及其他清理样式(如边框和宽度)在深色和浅色主题选择框上显示以下代码。

Tessa answered 2020-07-27T16:42:09Z
translate from https://stackoverflow.com:/questions/21103542/pseudo-elements-and-select-tag