2017-02-14 2 views
-1

Я пытаюсь удалить -webkit-appearance:none; через jQuery, но ничего не работает. Я попробовал следующее:-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

+0

Вы можете посмотреть на инструменты разработчика вашего браузера, в частности, все ошибки, представленные в консоли JavaScript (нажмите F12 в большинстве браузеров, и перейдите к консоли). –

+0

'jQuery (" select ") removeAttr (style);' это тот, который блокирует остальные, так как 'style' не определен. – callback

+0

Спасибо за предложения, ребята! Я исправил свой синтаксис, поэтому на консоли не могут быть обнаружены ошибки. Но он все еще не работает. (Я обновлю коды выше) –

ответ

2

Помимо коррекции ваш CSS, который является действительным подходом вы должны принять, если вы имеют сделать это с помощью JQuery использовать

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

jQuery достаточно умен, чтобы применить для него правильный префикс поставщика.
(, если вы хотите, чтобы исправить это для WebKit браузеров, хотя, а затем использовать)

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

(фактический селектор я использовал это неважно, все ваши селекторы работали бы)

+0

Спасибо @Gaby! Оба они работали, но я выбрал первый, чтобы он будет применяться ко всем (исправьте меня, если я ошибаюсь). –

+0

@jeepers_creepers Да, это применимо ко всем браузерам, которые поддерживают свойство 'outer' независимо от префикса. (* Имейте в виду, что' внешний вид 'является нестандартным имущество*) –

0

Ваш вопрос лежит в этой строке:

jQuery("select")removeAttr(style); 

style (обратите внимание, что вы используете переменную) не определена (по крайней мере, в области, которую показывают нам)

Просто используйте:

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

Спасибо @callback, но все еще не работает. :( –

+0

Я также пробовал как встроенный, так и другой файл, но все еще не работаю. –

0

Вы всегда можете создать класс .webkit-appearance, который перезаписывает css !important и назначает его с помощью jquery.

CSS:

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

JQuery:

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

Привет @ jeffrey-roosendaal! Спасибо за предложение. Но моя цель - полностью удалить '-webkit-appearance: none.'. искал значения для -webkit-внешнего вида, но мне ничего не нужно. Я также тестировал замену 'none' другими доступными значениями, но ничего не работает. –

0

Вы может достичь этого, используя простой JavaScript без использования jquery.

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

И так далее.

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

или, может быть:

$('select').each(function(index,item){ 
$(item).removeClass('-webkit-appearance') 
}) 
Смежные вопросы