我如何改變出現(xiàn)在輸入上的X的顏色

通過使用webkit-search-cancel-button和webkit-appearance: none，我已經(jīng)能夠?qū)⑺臑椴噬恼叫位驁A形，但是我無法更改x的顏色。

問題是safari上X的默認顏色是黑色，而by textbox是黑色，因此這是不可見的。Chrome選擇了安全的灰色，但它也有同樣的問題。

你可能不再需要這個解決方案了，但我會把它留在這里，看看它是否對任何人有幫助。

你不能直接改變清除按鈕(x)的顏色(據(jù)我所知)，但這里有一些我想出來的改變按鈕外觀的技巧。

基本上，我只是刪除了默認的clear按鈕，并用一個黑色的clear按鈕圖像替換它(我在這里使用base64編碼的圖像，您可以使用任何圖像)。

[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  width: 10px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjEyMy4wNXB4IiBoZWlnaHQ9IjEyMy4wNXB4IiB2aWV3Qm94PSIwIDAgMTIzLjA1IDEyMy4wNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIzLjA1IDEyMy4wNTsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTEyMS4zMjUsMTAuOTI1bC04LjUtOC4zOTljLTIuMy0yLjMtNi4xLTIuMy04LjUsMGwtNDIuNCw0Mi4zOTlMMTguNzI2LDEuNzI2Yy0yLjMwMS0yLjMwMS02LjEwMS0yLjMwMS04LjUsMGwtOC41LDguNQ0KCQljLTIuMzAxLDIuMy0yLjMwMSw2LjEsMCw4LjVsNDMuMSw0My4xbC00Mi4zLDQyLjVjLTIuMywyLjMtMi4zLDYuMSwwLDguNWw4LjUsOC41YzIuMywyLjMsNi4xLDIuMyw4LjUsMGw0Mi4zOTktNDIuNGw0Mi40LDQyLjQNCgkJYzIuMywyLjMsNi4xLDIuMyw4LjUsMGw4LjUtOC41YzIuMy0yLjMsMi4zLTYuMSwwLTguNWwtNDIuNS00Mi40bDQyLjQtNDIuMzk5QzEyMy42MjUsMTcuMTI1LDEyMy42MjUsMTMuMzI1LDEyMS4zMjUsMTAuOTI1eiIvPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=);
  background-size: 10px 10px;
}

<input type="search">

我找不到只改變顏色的方法，但是你可以用下面的方法覆蓋“x”按鈕樣式:

input[type="search"]::-webkit-search-cancel-button {
  /* Remove default */
  -webkit-appearance: none;
  /*Your new styles */
  height: 10px;
  width: 10px;
  background: red;
}

目前，Webkit瀏覽器(Chrome，Safari)支持這一功能。 https://developer . Mozilla . org/en-US/docs/Web/CSS/::-WebKit-搜索-取消-按鈕

改變顏色的一種變通方法是使用過濾器。在我的例子中，我只是希望x是黑色或灰色(而不是藍色)，所以我使用了黑白濾鏡

你可以使用一個反轉(zhuǎn)濾鏡來制作黑暗背景下的x光。

現(xiàn)在是2023年，仍然沒有好的解決方案來簡單地改變X的顏色。內(nèi)置X的顏色不能直接改變，但你可以用自己的X替換內(nèi)置X，并改變那個X的顏色。

根據(jù)我的需要，我希望顏色基于生成的主題是動態(tài)的，所以僅僅用一種顏色創(chuàng)建SVG不是一個足夠好的解決方案。然而，您可以創(chuàng)建一個svg X并使用-webit-mask-image以您選擇的顏色顯示它。這似乎是其他人提出的一個更簡單的通用解決方案。

input {
    background: black;
    color: white;
}

[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    background-color: var(--color);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'><path 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'/></svg>");
    background-size: 20px 20px;
    height: 20px;
    width: 20px;
}

<input type="search" style="--color: #00a0a0;" value="teal">
<input type="search" style="--color: #ee00ee;" value="pink">