How to convert a css such as "select::-ms-expand" dynamically in javascript?

Question

I have the following code that I want to use in javascript code like "$('select').css('-moz-appearance','none');". I searched for some solutions via google, but I wasn't able to find a way. Some tips or examples would be great ! I would love to hear from you.

<style>
        select::-ms-expand {
            display: none;
        }

        select {
            -moz-appearance: none;
        }
    </style>

Obsidian Age · Accepted Answer · 2017-11-13T03:46:28.393

The problem is that ::-ms-expand is a pseudo-element, and thus technically doesn't exist in the DOM. In terms of a JavaScript solution that doesn't require any CSS support, your only option would be to dynamically inject the desired rule into the stylesheet via JavaScript's addRule:

$('select').css('::-ms-expand', 'none');
if (navigator.appVersion.indexOf("MSIE") !== -1 || navigator.appVersion.indexOf("Trident") !== -1) {
  document.styleSheets[0].addRule('select::-ms-expand', 'display: none;');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>
  <option>1</option>
</select>

Note that the addition of the rule will throw a warning on Chrome and Firefox, but will work in Internet Explorer. As such, you should also confirm that the user is running Internet Explorer by checking against MSIE and Trident in their navigator.appVersion.

Hope this helps! :)

How to convert a css such as "select::-ms-expand" dynamically in javascript?

1 Answers1