Mac Safariのパスワードでinput(type="password" style="text-align: center;")のカーソル位置がずれた時の対処方法

はじめに

style="text-align: center;"のinputを複数並べた際、MacのSafariでtype="password"のinputだけカーソルが少し左にずれていることに気づきました。
※ChromeやiOSでは起きませんでした。

修正方法を調べたので、備忘録として残します。

パスワードのボタン自体を非表示にする方法と、スタイルを調整する方法の2種類を試しました。

対処方法１：パスワードのボタン自体を非表示にする

• ボタンを非表示、ポインターイベントなどを無効化します。

  .input::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none; 
    position: absolute; // フォーカス時、キーアイコン要素分中央からずれるため指定しています。
    right: 0;
  }

対処方法２：カーソルの位置がずれないようにスタイルを調整する

• positionを指定して、ボタンの位置を調整します。

 /* inputを囲むdiv要素に指定 */
  .input-outer-wrapper {
    position: relative;
  }

  .input::-webkit-credentials-auto-fill-button {
    position: absolute;
    right: 0;
  }

サンプル

See the Pen input-hidden-autofill-btn-sample by h-matcha (@h-matcha) on CodePen.

さいごに

果たしてこれが正解なのかは分かりません。
もっとスマートで良い方法があれば、コメントなどご教示いただけるとうれしいです。