在搜索输入框中设置 X 样式？ [复制]答案

【问题标题】：Styling the X on a search input box? [duplicate]在搜索输入框中设置 X 样式？ [复制]
【发布时间】：2014-08-21 02:32:17
【问题描述】：

我有一个 HTML 输入字段，例如 <input id='namebox' type="search" placeholder="Name" class="lensinput"/> 我的浏览器添加了一个小 X 来清除该框（我认为这是 HTML 5 的一部分，但我也在使用 zurb 基础）。如何设计 x 样式？如果我右键单击并检查 chrome 开发工具中的元素，x 会消失（我认为是因为该字段失去焦点）。如果我在开发工具中查看 HTML 树，我没有看到 x 的元素。

如何使用 CSS 设置 x 样式？这可能吗？

【问题讨论】：

我学到的一件事 -> 永远不要尝试设置用户代理渲染元素的样式，如 select .. type="search" 可能是相似的，如果你想要，重建它
我认为 x 是操作系统 UI 框架渲染搜索框的一部分，因此无法通过普通 CSS 设置样式。不过可能会有一些特定于浏览器的选项。
问题略有不同，但答案相同：Override the -webkit-search-cancel-button

标签： html css

【解决方案1】：

这对我运行 Chrome 83 有效：

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    cursor: pointer;

    height: 20px;
    width: 20px;
    background-image: url(" ### Inline SVG of Choice ### ");
}

之前：

之后：

【讨论】：

非常感谢。我使用 'content' 属性而不是 'background-image' 来渲染 svg。

【解决方案2】：

在基于 web-kit 的浏览器上，您可以采取一些技巧来为这种特定情况设置 css 样式。您可以通过::-webkit-search-cancel-button { 选择器访问用户代理生成的元素。

然后，禁用默认元素，并通过:after 和content css3 属性添加自定义“X”，设置您想要的任何样式...

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

::-webkit-search-cancel-button:after {
    content: 'X';
    font-style: italic;
    color: red;
}

在这里查看它的工作原理：http://jsfiddle.net/QYLNw/1/

【讨论】：

您的解决方案似乎不再适用于 Chrome 62