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

Question

我有一个HTML输入字段，像这样<input id='namebox' type="search" placeholder="Name" class="lensinput"/>我的浏览器添加了一个小X来清除框（我认为这是HTML 5的一部分，但我也使用zurb基础）。我该如何设计x？如果我右键单击并检查chrome dev工具中的元素，则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 ### ");
}

之前：

之后：

Answer 2

在基于Web工具包的浏览器中，您可以使用css样式设置此特定情况。 您可以通过::-webkit-search-cancel-button {选择器访问用户代理生成的元素。

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

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

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

在此处查看：http://jsfiddle.net/QYLNw/1/