-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-外观不会消失

回答

相关问题