在搜索输入框中设置 X 的样式？

Question

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

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

Answer 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 ### ");
}

前：

后：