input searchで入力すると出てくるXの色を変えるには？

htmlのタグinputには、type ="search"というのがある↓。

このタグを使うと、入力するとき、Xが出てきて、

このXをクリックすると、入力内容がすべて消える

ここで、入力領域を、↓のCSSのようにすると

.answer {
color:white;
background:black;
}

（つまり、入力領域の文字を白、背景を黒にすると）

Xだけ、白くならない。このXの色を白くするには？というのがお題。

---

■失敗：-webkit-search-cancel-buttonでは、色は変わらない

このXは、-webkit-search-cancel-buttonで、表示したり、削除したりできる。

例えば、表示を消すには、

input[type="search"]::-webkit-search-cancel-button {
　　　-webkit-appearance: none;
}

で消える。じゃあというので、同じ理屈で、

input[type="search"]::-webkit-search-cancel-button {
　　　color:white;
}

とやっても、Xボタンは白くならない。

---

■白く変えればいい場合

で、色を変えるとき、白く変えればいいだけであれば、

「color-scheme」

color-scheme - CSS: カスケーディングスタイルシート | MDN

を使えばできる。color-schemeを

:root {
color-scheme:dark;
}

と記述すると、↓のように、周りが黒くなって、Xが白くなる。

また、フォーカスが当たった時、白くなる

周りも黒くなってしまうのは、困る。

そこで、color-schemeをroot(つまりhtml全体）にではなく、input[type="search"]に適用し、

さらに、フォーカスが当たった時、白くするのをやめさせる（outline:0）

と、思ったような感じになる。

まとめると、CSSは、こんな感じ

.answer {
color:white;
background:black;
}


input[type="search"] {
outline:0;
color-scheme:dark;
}

そうすると、こんなかんじ

---

■白以外の場合

自分の場合はこれで済んだんだけど、白以外のXにしたい場合は…

Xのアイコン画像を変えるとできるのかなあ～（やってないです）

詳しくは、↓のサイトにあるみたい

<input type="\</p">