Question

在HTML5中的firefox和Internet Explorer下拉列表（选择列表）中显示选项以及可单击的选项卡以启动下拉列表。

在chrome上，这个相同的命令没有可见的显示，而下拉列表在点击时启动，我希望有一种方法可以明显地显示显示选项不是唯一的选项（不说“这是一个下拉列表“）。

当我在chrome中开发时，我继续将这个添加到我的css中并围绕选择。

dropdownlabel{
    position: relative;
}
dropdownlabel:after {
    content: '>';
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    right: 8px; top: 0px;
    font-size: 15px;
    position: absolute;
    pointer-events: none;
}

dropdownlabel:before {
    content: '';
    right: 6px; top:0px;
    width: 20px; height:20px;
    position: absolute;
    pointer-events: none;
    display: block;
}

问题是，现在有下拉指示符和向下指向“＆gt;”在Internet Explorer和Firefox上。我如何将这个CSS隐藏在firefox和Internet Explorer上？

或者，如果这是一种更好的方法，我将如何在Chrome上显示此内容？

我听说过媒体查询，并且只能为某些浏览器显示CSS，但我找不到任何关于为Firefox或Internet Explorer隐藏CSS的内容。

Answer 1

一个可能对您有用的有趣解决方案，尽管它以非正统的方式使用媒体查询。

特别是，调用仅针对webkit浏览器的媒体查询（从而排除IE和FF）。

@media screen and (-webkit-min-device-pixel-ratio:0) {

   /* YOUR CSS */

}

在不同的浏览器上隐藏/显示CSS

1 个答案: