Not display ::ms-clear pseudo element using JavaScript

Question

I want to disable/remove/not display the ::ms-clear button that is appearing in input fields in IE. How can I do the following

input[type=text]::-ms-clear { display: none; }

using JavaScript? It is sufficient for me to do this on each HTMLInputElement if that is easier.

(I wish not to use any external libraries such as jQuery)

Answer 1

It seems that pseudo-elements are readonly? I am trying to do

window.getComputedStyle(this.inputTextElement, "::ms-clear").setProperty("display", "none");

but I get exception NoModificationAllowedError.

The closest working thing to set this in JavaScript seems to be doing

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '::-ms-clear{display:none};';
document.getElementsByTagName('head')[0].appendChild(style);