とあるWEBシステムにて、適当に文字を入力していたところ、
黄色いテキストボックスや、白いテキストボックスが点在していました。
なーんでだ？
調べたところchromeのオートフィル機能を使って入力すると色がつくらしい。
このオートフィルの色をとるには、以下のようにcssを指定すればよい。
css; title: ; notranslate" title="">
/* オートフィル */
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
/* フォーカス */
/* ↓チェックボックスの状態が見えないのでこの設定はしないほうがよいです */
:focus {
/* -webkit-box-shadow: 0 0 0px 1000px white inset; */
}
/* リストボックス */
option {
background-color: white;
}
オートフィルの黄ばみを除去したところ、フォーカスした時の黄ばみも気になる。フォーカスしたところを黄色くする機能も、どう考えてもいりません。見りゃどこにフォーカスしたか、カーソルがあるから分かるでしょう。
※上記の見解どおりフォーカス時の色までとってしまうと、リストボックスとかの選択時によくわからない感じになるので、勝手に色付けされるのは不本意ですが、いたしかたなくほおっておくことにしました（2017/07/11 15:00 削除しました）
リストボックス(optionタグ)も黄ばむので漂白する必要があります。
入力のアイテムが黄色くなると「エラーになっているのか？」と不安にさえなりますので、この黄ばみは取り除いていたほうが無難だと思います。ユーザもオートフィルで入力した値と手入力した値の区別はつけていないでしょう。淡くても黄色は警告カラー、フォーカスした時に黄色くしないほうが自然で心地よいです。
だいたい、なにかを色をつけたいならデザイナが自主的にcssで色を設定すべきです。そんな時も上記のcssが役に立つでしょう。というわけで不要な色をつけないシーンのほうが多いのではないでしょうか。
コメント