jQuery，如何更改webkit属性？

Question

我试图弄清楚如何在jquery中更改webkit属性以删除输入微调器？ 为了在CSS中做到这一点，您需要以下代码：

.quantity::-webkit-inner-spin-button, 
.quantity::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

但是我想用jQuery添加“ -webkit-apperance：none;”和“ margin：0”

我努力了：

$('input[type=number]').css({
                "display":"-webkit-outer-spin-button"
            }).css({
                '-webkit-appearance':'none',
                'margin':'0'
            });

我已经尝试过：

 $('input[type=number]::-webkit-outer-spin-button')({
       '-webkit-appearance':'none',
       'margin':'0'
 });

和：

$('input[type=number]').css({
            '-webkit-inner-spin-button': '',
             '-webkit-outer-spin-button':''({
                 '-webkit-appearance':'none',
                 'margin':'0'
             })


 });

Answer 1

旋转按钮是伪元素，并且“ 不成为DOM的一部分 ”。
因此jQuery 无法直接访问它们 。

我建议使用jQuery添加/删除定义-webkit-appearance 。

 jQuery('#trigger').on('click', function() { jQuery('.quantity').addClass('hide_spin'); }); 

 .quantity.hide_spin::-webkit-inner-spin-button, .quantity.hide_spin::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* just for demo */ .quantity.hide_spin { background-color: lightgreen; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button" id="trigger">Click To Remove Spinner</button> <input type="number" class="quantity">