关于input[type="search"]::-webkit-search-cancel-button样式设置的技术问题问询

嘿，这两个问题我刚好熟，给你唠唠：

1. 为什么-webkit-appearance: none;是必须的？ #

其实这个属性的核心作用就是把浏览器给这个伪元素的原生默认样式“清零”。

你想啊，Chrome、Edge这类基于WebKit内核的浏览器，给搜索框的取消按钮自带了一套“硬编码”的默认外观——比如它是个内置的小叉号图标，还有固定的尺寸、边距，甚至是隐藏的背景占位规则。如果不把-webkit-appearance设为none，浏览器的这些原生样式优先级特别高，你自己写的background: yellowgreen这类自定义样式根本生效不了，直接被浏览器自带的样式给覆盖了。只有先关掉原生外观，你才能完全掌控这个按钮的样式，想怎么改就怎么改。

2. 只想改叉号的颜色该怎么做？ #

可惜的是，浏览器自带的原生叉号是个内置的资源文件，你没法直接通过color属性改它的颜色。这时候有两个实用的办法：

方法一：用带颜色的SVG自定义叉号 #

先重置原生外观，然后把SVG当背景图，直接在SVG里改填充色：

input[type="search"]::-webkit-search-cancel-button{
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    /* 把下面的fill='red'改成你要的颜色就行 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='red'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
}

方法二：用字符叉号自定义 #

如果觉得SVG麻烦，也可以用content加个叉号字符，然后直接改color：

input[type="search"]::-webkit-search-cancel-button{
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    color: red; /* 这里改颜色 */
    font-size: 16px;
    content: "×";
    text-align: center;
    line-height: 16px;
    border: none;
    background: transparent;
    cursor: pointer;
}

⚠️ 注意：不管用哪种方法，都得先加-webkit-appearance: none;，不然还是用的浏览器原生叉号，改不了颜色。

备注：内容来源于stack exchange，提问作者KUNAL TIWARI