在伪元素</select>下面打开<select>

Question

Firebug中的HTML：

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

使用CSS：

.select-contain:after { background: image.jpg; position: absolute; /** ... */ }

结果是这样的：

问题是无法点击:after伪选择器上的图片来打开<select>。

我尝试用jQuery做一些事情：

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

但由于我没有找到a reliable way of opening a <select> programmatically

，这不起作用

有什么方法可以打开<select>上面的伪元素吗？

Answer 1

你可以在某种程度上使用css来设置它们的样式，但它不会在所有浏览器中都有效http://caniuse.com/#search=appearance

这是公平的恕我直言，因为你优雅降级到正常选择，但当然，你的项目需要好的

如果你想看看，这是一个很好的资源：http://lea.verou.me/2011/03/custom-select-drop-downs-with-css3/