Bloggerに引っ越ししてきました&#65281;

ふじやん様
なるほど！黒がデフォルトなんですね！ようやく理解できました。じゃあ確かにこれは単なる偶然ですね！fillの値は時間がある時に直しておこうと思います。
細かな事まで親切にありがとうございました！

とにかく background-image の場合は fill に不正な値(var(--brand-font)のようなカスタムプロパティとか)を入れると、何も指定しないのと同じ状態でデフォルトの黒になってしまうのです。
safari 環境がないので検証はできませんが、どのブラウザでも同じ表示になるはず…？
あ、ちなみに Firefox はキャンセルボタン自体に非対応ですので「x」は表示されません。

ふじやん様、確かに-webkit-search-cancel-buttonとある所を変更したので、iPhoneのSafariのみの反映なのかもしれません。
またいろいろな環境から見てみようと思います！

ふじやん様、ありがとうございます。
そうなんですか？変更後黒になったのですが…。
とりあえずうちの場合は黒にしとけば十分なので、色名で登録してみようと思います！

こんにちは。
デモサイトへのコメントにも返信させていただきましたが、一応こちらにも。

追加のご指摘の件ですが、background-image として表示させている SVG の場合は、色指定の fill 属性には色名、またはカラーコード(# は %23 に要エスケープ)しか指定できませんのでご注意ください。
色名、または %23カラーコード以外の値を入れても反映されず黒色になってしまいます。むーなかさんのブログの場合はたまたま黒色になっているだけです。

このコメントは投稿者によって削除されました。

ふじやん様、ありがとうございます！まさかこんなに早くご本人にコメントいただけるとは思っていませんでした。対応も素早く、本当にただただ感謝です。早速使おうと思います！！

4月 09, 2023