blocks|key|950334|text|我没有广泛地检查过这个，但我的印象是这还不是(还没有？)这是可能的，因为select元素是由运行浏览器的操作系统生成的，而不是由浏览器本身生成的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|950335|entityMap^0|10|6|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>I haven't checked this extensively, but I'm under the impression that this isn't (yet?) possible, due to the way in which <code>select</code> elements are generated by the OS on which the browser runs, rather than the browser itself.</p>


blocks|key|950380|text|面临着同样的问题。这可能是一种解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|950381|<select+id="select-1">
++++<option>One</option>
++++<option>Two</option>
++++<option>Three</option>
</select>
<label+for="select-1"></label>

#select-1+{
++++...
}

#select-1+%2B+label:after+{
++++...
}|code-block|syntax|javascript|950382|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Faced the same problem. Probably it could be a solution:</p>

<pre><code>&lt;select id="select-1"&gt;
    &lt;option&gt;One&lt;/option&gt;
    &lt;option&gt;Two&lt;/option&gt;
    &lt;option&gt;Three&lt;/option&gt;
&lt;/select&gt;
&lt;label for="select-1"&gt;&lt;/label&gt;

#select-1 {
    ...
}

#select-1 + label:after {
    ...
}
</code></pre>


blocks|key|950428|text|这篇文章可能对http://bavotasan.com/2011/style-select-box-using-only-css/有所帮助|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|950429|他正在使用带有类的外部div来解决这个问题。|950430|<div+class="styled-select">
++<select>
++++<option>Here+is+the+first+option</option>
++++<option>The+second+option</option>
++</select>
</div>|code-block|syntax|javascript|950431|entityMap|0|LINK|mutability|MUTABLE|url|http://bavotasan.com/2011/style-select-box-using-only-css/^0|7|1M|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>This post may help <a href="http://bavotasan.com/2011/style-select-box-using-only-css/" rel="noreferrer">http://bavotasan.com/2011/style-select-box-using-only-css/</a></p>

<p>He is using a outside div with a class for resolving this issue.</p>

<pre><code>&lt;div class="styled-select"&gt;
  &lt;select&gt;
    &lt;option&gt;Here is the first option&lt;/option&gt;
    &lt;option&gt;The second option&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;
</code></pre>


blocks|key|1164525|text|我正在寻找相同的东西，因为我选择的背景与箭头颜色相同。如前所述，在select元素上使用:before或:after添加任何内容都是不可能的。我的解决方案是创建一个包装器元素，在代码之前添加以下内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1164526|.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;
}|code-block|syntax|javascript|1164527|这是我的选择|1164528|select+{
++++box-sizing:+border-box;
++++-webkit-box-sizing:+border-box;
++++-moz-box-sizing:+border-box;
++++width:+100%25;
++++padding:+10px+20px;
++++background:+#000;
++++color:+#fff;
++++border:+none;
++++-webkit-appearance:+none;
++++-moz-appearance:+none;
++++appearance:+none;
}

select::-ms-expand+{
++++display:+none;
}|1164529|我为我的新箭头使用了FontAwesome.io，但您可以使用其他任何您想要的东西。显然，这不是一个完美的解决方案，但根据您的需要，它可能就足够了。|1164530|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I was looking for the same thing since the background of my select is the same as the arrow color. As previously mentioned, it is impossible yet to add anything using :before or :after on a select element. My solution was to create a wrapper element on which I added the following :before code.</p>

<pre><code>.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;
}
</code></pre>

<p>And this my select</p>

<pre><code>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;
}
</code></pre>

<p>I have used FontAwesome.io for my new arrow, but you can use whatever else you want. Obviously this is not a perfect solution, but depending on your needs it might be enough. </p>


blocks|key|1164554|text|此解决方案类似于sroy的解决方案，但使用的是css三角形而不是网页字体：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1164555|​|1164556|.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%25;
}
select::-ms-expand+{
++display:+none;
}|code-block|syntax|javascript|1164557|<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>|1164558|1164559|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>This solution is similar to the one from sroy, but with css triangle instead of web font:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="select-wrapper"&gt;
  &lt;select&gt;
    &lt;option value="1"&gt;option 1&lt;/option&gt;
    &lt;option value="2"&gt;option 2&lt;/option&gt;
    &lt;option value="3"&gt;option 3&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1164643|text|根据我的经验，它根本不起作用，除非你愿意用某种包装器包装你的<select>。但是你可以做的是使用背景图像SVG。例如。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1164644|++++.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%2Bxml;charset=utf8,%253Csvg+xmlns='http://www.w3.org/2000/svg'+version='1.1'+height='10px'+width='15px'%253E%253Ctext+x='0'+y='10'+fill='gray'%253E%25E2%2596%25BE%253C/text%253E%253C/svg%253E");
++++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;
++++}|code-block|syntax|javascript|1164645|因为IE，所以要小心使用正确的URL编码。你必须使用charset=utf8+(不仅仅是utf8)，不要使用双引号(")来分隔SVG属性值，而要使用撇号(')来简化你的工作。URL编码s+(%253E)。如果你必须打印任何非BabelMap字符，你必须获得它们的UTF8表示(例如，BabelMap可以帮助你)，然后以URL编码的形式提供该表示-例如，对于▾(U%2B25BE黑色向下指向的小三角形)+UTF-8表示是\xE2\x96\xBE，当URL编码时是%25E2%2596%25BE。|1164646|entityMap^0|U|8|0|0|Q|C|18|4|4Y|6|5P|C|6A|9|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|N|$]]

<p>To my experience it simply does not work, unless you are willing to wrap your <code>&lt;select&gt;</code> in some wrapper. But what you can do instead is to use background image SVG. E.g.</p>

<pre><code>    .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;
    }
</code></pre>

<p>Just be careful with proper URL-encoding because of IE. You must use <code>charset=utf8</code> (not just <code>utf8</code>), don't use double-quotes (") to delimit SVG attribute values, use apostrophes (') instead to simplify your life. URL-encode s (%3E). In case you havee to print any non-ASCII characters you have to obtain their UTF-8 representation (e.g. BabelMap can help you with that) and then provide that representation in URL-encoded form - e.g. for ▾ (<code>U+25BE</code> BLACK DOWN-POINTING SMALL TRIANGLE) UTF-8 representation is <code>\xE2\x96\xBE</code> which is <code>%E2%96%BE</code> when URL-encoded.</p>


blocks|key|1164699|text|<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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1164700|为什么不在select之外添加一个div呢？|unstyled|1164701|然后在CSS中设置样式|1164702|.select{
++++width:+100%25;
++++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%25;
++++++++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;
}|1164703|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$B|C]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>&lt;div class="select"&gt;
&lt;select name="you_are" id="dropdown" class="selection"&gt;
&lt;option value="0" disabled selected&gt;Select&lt;/option&gt;
&lt;option value="1"&gt;Student&lt;/option&gt;
&lt;option value="2"&gt;Full-time Job&lt;/option&gt;
&lt;option value="2"&gt;Part-time Job&lt;/option&gt;
&lt;option value="3"&gt;Job-Seeker&lt;/option&gt;
&lt;option value="4"&gt;Nothing Yet&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;
</code></pre>

<p>Insted of styling the select why dont you add a div out-side the select.</p>

<p>and style then in CSS</p>

<pre><code>.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;
}
</code></pre>


blocks|key|950724|text|如果不能修改标记怎么办？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|950725|这里有一个不需要包装器的解决方案:它在背景图像中使用SVG。您可能需要使用HTML+entity+decoder来了解如何更改填充颜色。|offset|length|950726|-moz-appearance:+none;
-webkit-appearance:+none;
appearance:+none;

background-image:+url('data:image/svg%2Bxml;charset=US-ASCII,%253Csvg%2520xmlns%253D%2522http%253A%252F%252Fwww.w3.org%252F2000%252Fsvg%2522%2520width%253D%2522292.4%2522%2520height%253D%2522292.4%2522%253E%253Cpath%2520fill%253D%2522%2523000000%2522%2520d%253D%2522M287%252069.4a17.6%252017.6%25200%25200%25200-13-5.4H18.4c-5%25200-9.3%25201.8-12.9%25205.4A17.6%252017.6%25200%25200%25200%25200%252082.2c0%25205%25201.8%25209.3%25205.4%252012.9l128%2520127.9c3.6%25203.6%25207.8%25205.4%252012.8%25205.4s9.2-1.8%252012.8-5.4L287%252095c3.5-3.5%25205.4-7.8%25205.4-12.8%25200-5-1.9-9.2-5.5-12.8z%2522%252F%253E%253C%252Fsvg%253E');
background-repeat:+no-repeat;
background-position:+right+.7em+top+50%25;
background-size:+.65em+auto;|code-block|syntax|javascript|950727|从CSS-Tricks中摘录。|950728|entityMap|0|LINK|mutability|MUTABLE|url|https://www.url-encode-decode.com/|1|https://css-tricks.com/styling-a-select-like-its-2019/^0|0|11|J|0|0|0|1|A|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@$D|13|E|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

<p>What if modifying the markup isn't an option?</p>

<p>Here's a solution that has no requirements for a wrapper: it uses an SVG in a background-image.
You may need to use an <a href="https://www.url-encode-decode.com/" rel="noreferrer">HTML entity decoder</a> to understand how to change the fill colour.</p>

<pre><code>-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;
</code></pre>

<p>Pinched from <a href="https://css-tricks.com/styling-a-select-like-its-2019/" rel="noreferrer">CSS-Tricks</a>.</p>


<p>I would like to add some style on a select box with the pseudo :after (to style my select box with 2 parts and without images). Here's the HTML:</p>

<pre><code>&lt;select name=""&gt;
  &lt;option value=""&gt;Test&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>And it doesn't work. I don't know why and I didn't find the answer in the W3C specs. Here's the CSS:</p>

<pre><code>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;
}
</code></pre>

<p>So is it normal or is there a trick?</p>


problem with <select> and :after with CSS in WebKit

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想添加一些样式在一个选择框与伪:after (样式我的选择框有2个部分，没有图像)。下面是HTML：<select name="">  <option value="">Test</option></select>但它不起作用。我不知道为什么，我也没有在W3C规范中找到答案。下面是CSS：select {  -web...

问<select>和: WebKit中CSS的问题
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问<select>和: WebKit中CSS的问题EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问<select>和: WebKit中CSS的问题
EN