javascript - -webkit-appearance 不消失

Question

我一直在尝试通过 jQuery 删除-webkit-appearance:none; 但没有任何效果。我尝试了以下方法:

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>

我的目标是删除该部分，以便我的选择下拉列表将显示向下箭头符号或“插入符号”。

非常感谢任何帮助。谢谢!

-伊莱

Answer 1

如果您通过使用 jQuery 来纠正您的 CSS，这是您应该采取的有效方法

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

jQuery 足够聪明，可以为其应用正确的 vendor 前缀。
(如果你只想为 webkit 浏览器修复它，那么使用)

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

(我实际使用的选择器并不重要，你所有的选择器都可以工作)