Javascript 开放式<；选择>；下伪元素

Firebug中的HTML：

<div class="select-contain">
    <select id="sel" name="sel" class="some-class">
    <!-- <option>s -->
    </select>
    ::after
</div>

结果是这样的：

问题在于，无法单击

：after

伪选择器上的图像打开

我试着用jQuery做一些事情：

jQuery('.select-contain').click(function(e){
    console.log(e); // the event is triggered succesfully
    jQuery(this).find('select').focus(); // .click()
});

但这不起作用，因为我没有找到

---

有什么方法可以打开上面有伪元素的

吗？

您可以在一定程度上使用css来设置样式，但它不能在所有浏览器中工作

这是足够公平的IMHO作为您优雅地降低到一个正常的选择，但当然，这需要与您的项目确定

---

如果您想看一看，这是一个很好的资源：

我不确定这是否可行。但是如果你的唯一目的是“风格”下拉，你可能会考虑使用第三方插件（例如jQuery），我觉得这很不错。UI通常被认为是不稳定的。虽然可以将边框和边框半径设置为文本字段，但单选按钮或复选框仅限于css（边距，yay）。好的第三方工具有一个优点，那就是它们在大多数浏览器上看起来都一样漂亮。@boris:我害怕这个。。。该站点已经被javascript填满了，不想再添加更多的内容。感谢您提供的资源，我将检查它们。我能找到的最好方法是使用：

。选择容器：在{pointer events:none；}

之后。在除IE 8-10（该死的IE）之外的所有浏览器上都能正常工作

jQuery('.select-contain').click(function(e){
    console.log(e); // the event is triggered succesfully
    jQuery(this).find('select').focus(); // .click()
});