CSS中的::-ms-clear

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/10/20/CSS%E4%B8%AD%E7%9A%84-ms-clear/

摘要

本文主要讲述了：

背景
什么是::-ms-clear
作用

正文

背景

当<input>中存在文本且获得焦点时，IE 10+会在其右侧显示一个清除按钮用于清除已输入的文本。

什么是::-ms-clear

::-ms-clear是 CSS 中的一个伪元素。

作用

修改清除按钮的样式。

示例：隐藏清除按钮

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" placeholder="placeholder" />
    <input type="tel" placeholder="placeholder" />
    <input type="number" placeholder="placeholder" />
    <input type="url" placeholder="placeholder" />
    <input type="email" placeholder="placeholder" />
    <style>
      ::-ms-clear {
        display: none;
      }
    </style>
  </body>
</html>