CODEWITHSUNDEEP
jquerywebkit
jack Mak
jack Mak

Reputation: 1

Jquery, how change webkit attribute?

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'
             })


 });

Upvotes: 0

Views: 747

Answers (2)

Nikita Jurievich Nickemail
Nikita Jurievich Nickemail

Reputation: 11

You can use DATA ATTR.

 $css = 'display:inline-block; -webkit-mask:url(/templates/styles/footer_widget/1.svg) no-repeat center center; -webkit-mask-size:contain; background-color:#333';
$(this).attr('style',$css);

Upvotes: 0

showdev
showdev

Reputation: 29168

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">

Upvotes: 1

Related Questions