![](https://blogimg.goo.ne.jp/user_image/4e/18/17a5bc7fd92676f9dbfb51415e88dc88.png)
htmlのタグinputには、type ="search"というのがある↓。
![](https://blogimg.goo.ne.jp/user_image/5a/f8/7360232fa3706ede66e8da89a407231d.png)
このタグを使うと、入力するとき、Xが出てきて、
![](https://blogimg.goo.ne.jp/user_image/6c/0b/9ec78804117b5b9f3c3364c0042d6fe5.png)
このXをクリックすると、入力内容がすべて消える
ここで、入力領域を、↓のCSSのようにすると
.answer {
color:white;
background:black;
}
(つまり、入力領域の文字を白、背景を黒にすると)
![](https://blogimg.goo.ne.jp/user_image/15/84/50128c976b7513f94641879a651e3f90.png)
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を
:root {
color-scheme:dark;
}
と記述すると、↓のように、周りが黒くなって、Xが白くなる。
また、フォーカスが当たった時、白くなる
![](https://blogimg.goo.ne.jp/user_image/40/cc/26026259a046af914876781a827728a4.png)
周りも黒くなってしまうのは、困る。
そこで、color-schemeをroot(つまりhtml全体)にではなく、input[type="search"]に適用し、
さらに、フォーカスが当たった時、白くするのをやめさせる(outline:0)
と、思ったような感じになる。
まとめると、CSSは、こんな感じ
.answer {
color:white;
background:black;
}
input[type="search"] {
outline:0;
color-scheme:dark;
}
そうすると、こんなかんじ
![](https://blogimg.goo.ne.jp/user_image/4e/18/17a5bc7fd92676f9dbfb51415e88dc88.png)
■白以外の場合
自分の場合はこれで済んだんだけど、白以外のXにしたい場合は…
Xのアイコン画像を変えるとできるのかなあ~(やってないです)
詳しくは、↓のサイトにあるみたい