web-dev-qa-db-ja.com

CSSオートコンプリートフォントサイズ

ブラウザからオートコンプリートの提案をホバリングするときに、プレビューテキストのデフォルトのフォントサイズを増やす方法または使用方法を理解できませんでした。

私は https://tailwindcss.com/ を使用しています。

例えば。:

これは、いくつかのテキストを入力した後にデフォルトのフォントサイズを持つ、通常の入力要素です。

enter image description here

そして、私が提案されたオートコンプリートアイテムのうちの1つをホバーするときのプレビューのフォントサイズです。

enter image description here

ご覧のとおり、フォントサイズは最初の画像からはるかに小さいです。

enter image description here

私はすでにすべてのブラウザ固有のスタイルを無効にするためにいくつかのCSSスニペットを使用しています。

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: inherit;
  -webkit-text-fill-color: inherit;
  -webkit-box-shadow: inherit;
  transition: background-color 5000s ease-in-out 0s;
  font-size: inherit;
}
 _

最後のプロパティfont-sizeは何もしません。

入力フォントサイズに次のCSSを使用しています。

    font-size: 1.125rem !important;
 _

フォントサイズをインラインスタイルとして割り当てるには、それを修正するようにそれを試してみましたが、それも機能しません:

enter image description here

Live Example: https://codesandbox.io/s/o766kp4z05 例を使用して、電子メールフィールドに電子メールを入力してフォントを調べてください。サイズ。フォントサイズには同じ問題があります。

フォントサイズを修正することは可能ですか?

敬意を表す、パトリック

37
Patrick Wozniak

これはとてもトリッキーです!私はこれで遊んだ

:-internal-autofill-previewed {
  font-size: 22px !important;
}
 _

点滅マーカー(|)がホバリング時に変わりますが、「プレースホルダー」はまだ同じです。:-internal-autofill-previewed::placeholderもうまくいきませんでした。

0
Lumi

ユーザーエージェントのスタイリングを上書きすることは時々難しいことです。この記事は、スタイリング入力のオートコンプリート( https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/ )であると協議しました。あなたがすでに使用しているものに、そしてそれはあなたが尋ねた問題を解決しません。私たちが現在スタイルできないネイティブ要素の一部のうちの1つになるかもしれません。

もう1つの類似の問題は、入力要素に固定されたバックグラウンドイメージを設定した場合、例えばパスワードフィールドのエッジに設定されているロックのアイコンを設定し、次にフォームにオートコンプリート機能を使用することです。消えて、現在それを修正するために行うことができるものは何もありません。それが不可能であることを扱い、クライアントに伝えなければならないことの1つだけです。

0