「每日一技」关于输入框后面的那个“✖️”<input type='search' /> 元素后面为什么会有个‘✖️’？要

在 webkit 内核的浏览器中，如果 input 元素的 type='search'，就会在输入框的后面自动出现一个叉，用来清除输入的内容，例如：

如何去除

如果我们不想要这个叉，要怎么做？

只要一行代码：

input::-webkit-search-cancel-button {
    appearance: none;
}

如何自定义

同理，使用 ::-webkit-search-cancel-button 可以自定义这个叉的样式。例如把它改成一个圆点：

input::-webkit-search-cancel-button {
    appearance: none;
    content: "";
    position: absolute;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: tomato;
}

如何检查元素

如果想要用浏览器开发者工具中的 Elements 面板检查这个元素的话，一般情况下是检查不到的，因为它是在 shadow-dom 里。在 Chrome 浏览器里按下面步骤操作一下就能检查这个元素：

点击开发者工具右上角的齿轮图标（setting）；
选中 Preferences -> Elements 中的 “Show user agent shadow DOM”。

其他浏览器应该也有类似的设置。