jQuery，如何更改webkit属性？

Question

I am trying to figure out how to change webkit attribute in jquery to remove an input spinner? In order to do that in CSS you have this code:

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

but i want to add the "-webkit-apperance:none; " and "margin:0" with jquery

I have tried:

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

and i have tried :

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

and:

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


 });

Answer 1

The spin buttons are pseudo-elements and do " not become part of the DOM ".
So jQuery can't access them directly .

I suggest using jQuery to add/remove a class which defines the -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">