Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
The ::-ms-clear
CSS pseudo-element creates a clear button at the edge of an <input type="text">
text control that clears the current value. This pseudo-element is non-standard, supported only in Internet Explorer 10, Internet Explorer 11, and Microsoft Edge.
The clear button is only shown on focused, non-empty text controls. This includes inputs that appear text-like or fall back to type="text"
. Such inputs include:
<input type="color">
<input type="date">
<input type="datetime">
<input type="datetime-local">
<input type="email">
<input type="month">
<input type="number">
<input type="search">
<input type="tel">
<input type="time">
<input type="url">
<input type="week">
Allowable Properties
Only the following CSS properties can be used in a rule with ::-ms-clear
in its selector. Other properties are ignored.
-ms-high-contrast-adjust
background-clip
background-color
background-image
background-origin
background-position-x
background-position-y
background-repeat
background-size
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-left-color
border-left-style
border-left-width
border-right-color
border-right-style
border-right-width
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
box-shadow
box-sizing
color
cursor
display
(valuesblock
,inline-block
,none
)@font-face
font-size
font-style
font-weight
height
margin-bottom
margin-left
margin-right
margin-top
opacity
outline-color
outline-style
outline-width
padding-bottom
padding-left
padding-right
padding-top
transform
transform-origin
visibility
width
Syntax
::-ms-clear
Example
HTML
<form> <label for="firstname">First name:</label> <input type="text" id="firstname" name="firstname" placeholder="First name"> <br> <label for="lastname">Last name:</label> <input type="text" id="lastname" name="lastname" placeholder="Second name"> </form>
CSS
input, label { display: block; } input[type=text]::-ms-clear { color: red; /* This sets the cross color as red. */ /* The cross can be hidden by setting the display attribute as "none" */ }
Result
The following screenshot shows what the feature will look like:
Specifications
Not part of any specification.
Browser compatibility
Historically supported in Internet Explorer and Edge before version 79.