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

我相信spin buttons是pseudo-elements，不会出现在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">

jQuery，如何更改webkit属性？

1 个答案: