Textfieldの中に情報を増やさないほうがいい
汎用で使うこういうTextfield、中に色々増やさない方がいい
https://gyazo.com/641d4f040e817ce81f928ef96ba23772
なぜならば、Textfieldの中は各Webブラウザが好き勝手にデザインしてるから
ブラウザのパワーを最大限に活かしたいなら、Textfieldの中身にデザインを増やさないほうがいい
Webブラウザ機能色々
type="number"は端にspin-buttonが付いてくる
https://gyazo.com/0f1ce3836e62a984ffb9eb21ce1bd8e5 こういうの
Edgeはtype="password"にパスワードの表示/非表示ボタンを標準で付けている
https://gyazo.com/f35c79718d8d18c02c4890d49f539da8
Macユーザーはこの機能知らないので親切心でおめめが2つになったりする
Safariはパスワード入力補助のボタンを付けている
https://gyazo.com/68373401e0b785a69d949c2b98065b64
これをずらすSafari用のcssも存在する
その他プラグイン等を導入していると更に改変が増える
1Passwordとか
Textfieldのためのエラー表示、独自のボタン、その他情報をTextfieldの四角形の中に置くな
ユーザーの混乱につながる
「共存させるために位置をずらそう」とか「デフォルトの機能は消してプロダクトのデザインを適用しよう」とか言い出すのは「ボタンのoutlineってダサいから消そうぜ！」と同じ地平にいる
ブラウザのデフォルト機能を消すなら同程度以上のa11y力が必要 情報を置くなら外側が良い
https://gyazo.com/6ace4edf54ff8e1df6dd1a2d9c5e9bea
デザイン上で内側に色々置きたい場合は、透明なTextfieldをdivの枠線で括ろう
機能がWebブラウザと被る場合は一部ブラウザでオミットすることも検討する
中にデザインを置いてもいい場合
Textfieldがメインのビジュアルを努める場所である
もはやただのTextfieldではなく独自のなにかである