搜索输入框上的X的样式？

Question

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

我如何用CSS来设置x的样式？这可能吗？

Answer 1

在基于web-kit的浏览器上，你可以做一个小技巧来设置css样式，以适应这种特殊情况。::-webkit-search-cancel-button { 选择器。

然后，禁用默认元素，并通过 :after 和 content css3属性，设置任意样式...

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

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

在这里看到它的工作。http:/jsfiddle.netQYLNw1

Answer 2

这对运行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 ### ");
}

Before:

After: