Jquery, how change webkit attribute?

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


 });

@CalvinNunes here you go [link](https://codepen.io/mharis/pen/kzcfv) its like this but the -webkit-appearance':'none', is not there and i want to add that via jquery — jack Mak, Jul 26 '18 at 19:11

showdev · Answer 1 · 2019-08-10T10:57:16.627

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

edited Aug 10 '19 at 10:57

answered Jul 26 '18 at 19:12

showdev

28,454
37
55
73

so there is not way to add "-webkit-appearance:none" via jquery/ java script because quantity.hide_spin::-webkit-outer-spin-button is already there and i am not suppose to modify the css file. – jack Mak Jul 26 '18 at 19:29
Correct. I don't believe jQuery can directly modify the CSS for pseudo-elements. See [Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery](https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin#answer-5041526). Another possible alternative is to [generate a style sheet using jQuery](https://stackoverflow.com/questions/1212500/create-a-css-rule-class-with-jquery-at-runtime). – showdev Jul 26 '18 at 19:37

Jquery, how change webkit attribute?

1 Answers1