Remove "X" from input telephone field in IE using JQuery

Question

I have an HTML input field of type telephone and I want to remove the "X" from the field (as shown below):

input type telephone field

I am able to do it with the following CSS code snippet:

input[name=phone]::-ms-clear {  
    display: none; width : 0; height: 0; 
}

But I want this rule applied to a specific page and not to the entire input type telephone fields.

I tried JQuery code:

phone.css("-ms-clear", "display: none; width : 0; height: 0") 

but that didn't work.

My specific question is how can I write the aforementioned CSS code in JQuery css method?

Answer 1

With a little CSS magic you can create a pseudo-element to cover it up:

 .tel { position: relative; display: inline-block; } .tel::after { content: ""; display: block; height: calc(100% - 2px); width: 20px; background-color: white; position: absolute; right: 1px; top: 1px; }

 <div class="tel"> <input type="tel" /> </div>

Answer 2

Welcome to stack-overflow! As per discussion in comments here is your answer.

Its simple (you don't need JS for doing this small job) On specific page body tag in which you want this behavior use css id selector and you can target these input and style it like

#pageid input[name=phone]::-s-clear { 
   display: none; 
   width : 0;
   height: 0; 
}