-webkit-外觀不會消失

-1

我一直試圖通過jQuery刪除-webkit-appearance:none;，但沒有任何工作。我已經試過如下：-webkit-外觀不會消失

jQuery(document).ready(function(){ 

    jQuery("select").removeAttr('style'); 
    jQuery("select").prop("style", ""); 
    jQuery("select").attr("style", ""); 
    jQuery("select").css("-webkit-appearance", "");

}）

而且這一個：

jQuery(document).ready(function(){ 

    jQuery("select:not([multiple])").removeAttr('style'); 
    jQuery("select:not([multiple])").prop("style", ""); 
    jQuery("select:not([multiple])").attr("style", ""); 
    jQuery("select:not([multiple])").css("-webkit-appearance", ""); 

})

最後：

jQuery(document).ready(function(){ 

    jQuery("select#bulk_action_stat").removeAttr('style'); 
    jQuery("select#bulk_action_stat").prop("style", ""); 
    jQuery("select#bulk_action_stat").attr("style", ""); 
    jQuery("select#bulk_action_stat").css("-webkit-appearance", ""); 

})

的CSS：

select:not([multiple]) { 
-webkit-box-shadow: none; 
-khtml-box-shadow: none; 
-moz-box-shadow: none; 
-ms-box-shadow: none; 
-o-box-shadow: none; 
box-shadow: none; 
-webkit-appearance: none; 
-khtml-appearance: none; 
-moz-appearance: none; 
-ms-appearance: none; 
-o-appearance: none; 
appearance: none; 
background: url(../images/arrow.png) no-repeat right center; 
height: auto; 
border: 0; 
padding-right: 20px; 
cursor: pointer; 
}

的HTML：

<form id="bulk_action_filter" class="form-inline" method="post"> 
    <select class="form-control" id="bulk_action_stat" name="bulk_action_stat"> 
     <option value="">Bulk Actions</option> 
     <option value="trash">Move To Trash</option> 
     <option value="wc-processing">Mark Processing</option> 
     <option value="wc-on-hold">Mark On-Hold</option> 
     <option value="wc-completed">Mark Complete</option> 
     <option value="wc-delivered">Mark Delivered</option> 
    </select> 
    <input form="bulk_action_filter" type="submit" name="filter_bulk_actions" class="check-all filter-button" value="Apply" "/> 
</form>

我的目標是去除一部分讓我的選擇下拉菜單會顯示向下箭頭符號或「插入符號」。

任何幫助，高度讚賞。謝謝！

-Eli

來源

2017-02-14 jeepers_creepers

你可能想看看你的瀏覽器的開發者工具，特別是在JavaScript控制檯報告的所有錯誤（按F12在大多數瀏覽器，然後導航到控制檯）。 –

'jQuery（「select」）removeAttr（style）;''是阻止其餘的'，因爲'style'是未定義的。 – callback

感謝您的建議傢伙！我糾正了我的語法，所以在控制檯中看不到任何錯誤。但它仍然無法正常工作。（我會更新上面的代碼） –

除了糾正你的CSS這是你應該採取有效的方法，如果你有做到這一點通過jQuery的使用

jQuery("#bulk_action_stat").css("appearance", "menulist-button");

jQuery足夠聰明，可以爲它應用正確的供應商前綴。
（如果你只是想解決它的WebKit瀏覽器，雖然，然後用）

jQuery("#bulk_action_stat").css("-webkit-appearance", "menulist-button");

（我使用的實際選擇是不重要的，所有的選擇會工作）

來源

2017-02-14 14:30:41

謝謝@Gaby！他們都工作，但我選擇了第一個，所以它將適用於所有（如果我錯了，請糾正我） –

@jeepers_creepers是的，它適用於所有支持「外觀」屬性而不考慮前綴的瀏覽器（*請記住，「外觀」是非標準的屬性*） –

你的問題就出在這行：

jQuery("select")removeAttr(style);

style（請注意，您使用的是可變的）沒有定義（在範圍至少你向我們展示）

只需使用：

jQuery(document).ready(function(){ 
    jQuery("select:not([multiple])").css("-webkit-appearance", ""); 
})

來源

2017-02-14 14:14:50 callback

感謝@callback，但仍然無法正常工作。 :( –

我也嘗試了內嵌和通過不同的文件，但仍然無法正常工作 –

你總是可以創建一個類.webkit-appearance，它用!important覆蓋css，並用jquery分配它。

CSS：

.webkit-appearance { 
    -webkit-appearance: somevalue !important; 
}

的jQuery：

jQuery(document).ready(function(){ 
    jQuery("select:not([multiple])").addClass('webkit-appearance'); 
})

來源

2017-02-14 14:26:34

嗨@ jeffrey-roosendaal！謝謝你的建議，但我的目標是徹底刪除'-webkit-appearance：none;'。尋找-webkit外觀的值，但沒有我需要的東西，我也測試了用其他值替換'none'，但沒有任何工作。 –

你可以使用普通JavaScript實現此功能，而不需要使用jquery。

[].slice.call(document.getElementsByTagName("select")).forEach(function(el, i) { 
      el.style.webkitAppearance = "none"; 
});

依此類推。

來源

2017-02-14 14:34:52 nashcheez

$('select').removeClass('-webkit-appearance')

或可能：

$('select').each(function(index,item){ 
$(item).removeClass('-webkit-appearance') 
})

來源

2017-02-14 16:37:08 Moonfred

-webkit-外觀不會消失

回答

相關問題