1

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)

HischT
  • 933
  • 1
  • 9
  • 26
  • Why not just do that in your CSS? – Pointy Mar 26 '14 at 15:17
  • @Pointy I want to be able to set this dynamically using JavaScript and not rely on a CSS file. – HischT Mar 26 '14 at 15:19
  • possible duplicate of http://stackoverflow.com/questions/4847313/dynamically-add-css-to-page-via-javascript – Stephen Thomas Mar 26 '14 at 15:23
  • 1
    The best way I've seen to work with pseudo-elements is to set it using a class in your CSS (e.g. `input.foobar::-ms-clear { display: none; }`), and then setting the class using script (e.g. using `document.querySelectorAll("input[type=text]")` and then looping through the result). See https://stackoverflow.com/questions/7882325/modify-css-style-for-pseudo-element-after-content-with-jquery – Olly Hodgson Mar 26 '14 at 15:23
  • Thank you for your answers. There is really no way to modify a pseudo element dynamically in JavaScript then? – HischT Mar 27 '14 at 07:53

1 Answers1

0

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);
HischT
  • 933
  • 1
  • 9
  • 26