在不同的瀏覽器上隱藏/顯示CSS

Question

在firefox和Internet Explorer上，HTML5中的下拉列表（選擇列表）顯示為選項以及可單擊的選項卡以啟動下拉菜單。

在chrome上，該命令沒有可見顯示，並且在單擊下拉列表時會啟動，但我希望有一種方法可以明顯顯示display選項不是唯一選項（無需說“這是一個下拉列表”） ）。

當我使用Chrome開發時，我繼續將其添加到我的CSS中，並附帶了select。

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

問題是，現在Internet Explorer和firefox上有一個下拉指示器和一個向下的“>”。 我將如何在firefox和Internet Explorer上隱藏此CSS？

另外，如果這樣做是更好的方法，我將如何只在Chrome上顯示呢？

我聽說過媒體查詢，可能只為某些瀏覽器顯示CSS，但對於為firefox或Internet Explorer隱藏CSS卻一無所獲。

Answer 1

一個有趣的解決方案可能對您有用，盡管它以非正統的方式使用媒體查詢。

特別是，調用僅針對Webkit瀏覽器的媒體查詢（因此不包括IE和FF）。

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

   /* YOUR CSS */

}