Html WebKit中CSS的和：after问题_Html_Css_Select

Html WebKit中CSS的和：after问题

html css select

Html WebKit中CSS的和：after问题,html,css,select,Html,Css,Select,我想用pseudo:after在选择框上添加一些样式，使我的选择框有两个部分，没有图像。以下是HTML： <select name=""> <option value="">Test</option> </select> 那么这是正常的还是有诡计呢？我还没有详细检查过，但我的印象是，这还不是很正常？这是可能的，因为选择元素是由运行浏览器的操作系统而不是浏览器本身生成的。面临同样的问题。也许这是一个解决方案： <select id="se

我想用pseudo:after在选择框上添加一些样式，使我的选择框有两个部分，没有图像。以下是HTML：

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

那么这是正常的还是有诡计呢？

我还没有详细检查过，但我的印象是，这还不是很正常？这是可能的，因为选择元素是由运行浏览器的操作系统而不是浏览器本身生成的。

面临同样的问题。也许这是一个解决方案：

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

这篇文章可能会有帮助

他正在使用一个外部div和一个类来解决这个问题

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

我正在寻找同样的东西，因为我选择的背景与箭头颜色相同。如前所述，现在还不可能在select元素上使用：before或：after添加任何内容。我的解决方案是创建一个包装器元素，我在其上添加了以下内容：before 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;
}

这是我的选择

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

我的新箭使用了fontsawome.io，但是你可以使用任何你想要的东西。显然，这不是一个完美的解决方案，但根据您的需要，这可能就足够了

此解决方案与sroy的解决方案类似，但使用css三角形而不是web字体：

.选择包装器{ 位置：相对位置；宽度：200px； } .选择包装器：在{ 内容：；宽度：0；身高：0；左边框：5px实心透明；右边框：5px实心透明；边框顶部：6px实心666；位置：绝对位置；右：8px；顶部：8px；指针事件：无； } 挑选{ 背景：eee；边界：0！重要；边界半径：0； -webkit外观：无； -moz外观：无；外观：无；文本缩进：0.01px；文本溢出：；字体大小：继承；行高：继承；宽度：100%； } 选择：：-ms展开{ 显示：无； } 选择1 选择2 选择3

这是我用的现代解决方案。为简洁起见，省略了供应商扩展

HTML

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

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

查看my的工作演示，该演示使用常规标签和占位符标签以及其他已清理的样式（如边框和宽度），在深色和浅色主题的选择框上显示这段代码

注：这是我今年早些时候发布的另一个重复问题的答案。

根据我的经验，这根本不起作用，除非你愿意用包装纸包装你的问题。但您可以改为使用背景图像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编码为%3E。如果您必须打印任何非ASCII字符，您必须获得其UTF-8表示形式，例如BabelMap可以帮助您，然后以URL编码形式提供表示形式-例如▾ U+25BE黑色下指小三角形UTF-8表示法为\xE2\x96\xBE，在URL编码时为%E2%96%BE。

如果修改标记不是一个选项怎么办

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

这里有一个不需要包装器的解决方案：它在背景图像中使用SVG。您可能需要使用来了解如何更改填充颜色

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

收缩自。

是否可以添加使标签位于选定元素顶部所需的样式？这在视觉上非常完美。但您不能单击该图标并选择元素不会打开：/Any suggestions？pointer events:none；我应该处理好这件事。上面的代码有问题。我会将上面的任何sass更改为css以消除任何混淆。在使用vs after之前使用哪个伪选择器有关系吗？您可以使用其中一个或另一个这是一个很好的解决方案，但在实现它时，我发现出于某种原因：在工作之前，而不是之后。我不知道为什么。我想这不可能，不应该是可能的，否则它会使更改表单内容变得太容易。想象一个简单的CSS改变一些东西的显示价格。它可能显示出比实际更便宜，诱使人们以超出预期的价格购买东西。当然，如果有人可以访问页面/用户样式表的CSS，那么他们可能会以其他方式进行相同的操作…@Synetech-这是错误的，页面作者应该完全控制页面样式的所有方面。浏览器制造商试图阻止某些元素的样式化，因为它们可能被用来误导用户，这是不会有效的，因为欺骗系统或产生误报的方法几乎是无限的

这是一个很好的，优雅的解决方案这是一个奇妙的，简单的，优雅的解决方案，不需要额外的HTML，这正是我所寻找的！谢谢这应该是我选择的答案。现在是2019年，现在仍然是sameIt's 2020年，现在仍然是sameIt's 2021年，现在仍然是sameIt's 2021年，现在仍然是sameIt's 2021年。哇，这个人在1月1日得到了答案。普利勒：2022年可能会是一样的。这是一个好把戏。超级恼人的是，我们仍然无法在2020年设置选择的样式。单击：after元素则不会激活selectSet the pointer events，在after中将其设置为none

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

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

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

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