My form consists of two text boxes for username and password entry.
While entering text in these boxes, I noticed that Internet Explorer (IE) has specific pseudo-elements for the Username and Password fields:
Username textbox:
<input class="form-control k-textbox checkError text-box single-line" data-val="true" data-val-required=" " id="UserName" name="UserName" placeholder="username" type="text" value=""/>
Password textbox:
<input class="form-control k-textbox pwd text-box single-line password" data-val="true" data-val-required=" " id="Password" name="Password" placeholder="password" type="password" value="" />
https://i.sstatic.net/EQmZF.png
There is a similar feature for the password textbox, but instead of an 'X', it shows an eye image.
To solve the issue with the Username, I added the following CSS code:
input[type=text]::-ms-clear
{
display:none;
}
Initially, I attempted to use the same approach for the password input field with 'type=password' line, but it did not work. Any suggestions on how to fix this?