☰

入力サイズと幅 質問する

tag-icon • tag-icon html css
入力サイズと幅 質問する 
<input name="txtId" type="text" size="20" />

または

<input name="txtId" type="text" style="width: 150px;" />

最適なクロスブラウザコードはどれですか?

もちろん要件によって異なりますが、人々がどのように、どのような基準で決定するのかを知りたいです。

ベストアンサー1

両方を使用できます。CSS スタイルは、sizeCSS をサポートするブラウザーの属性をオーバーライドしてフィールドを正しい幅にします。サポートしないブラウザーの場合は、指定された文字数に戻ります。

編集:sizeこの属性はサイズを正確に決定する方法ではないことを述べておくべきでした:HTML仕様に従って、これは入力が一度に表示できる現在のフォントの文字数を参照する必要があります。

ただし、指定されたフォントが固定幅/等幅フォントでない限り、指定された文字数が実際に表示される保証はありません。ほとんどのフォントでは、文字によって幅が異なります。この質問この問題に関する良い回答がいくつかあります。

以下のスニペットは、両方のアプローチを示しています。

@font-face {
    font-family: 'Diplomata';
    font-style: normal;
    font-weight: 400;
    src: local('Diplomata'), local('Diplomata-Regular'), url(https://fonts.gstatic.com/s/diplomata/v8/8UgOK_RUxkBbV-q561I6kFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
    font-family: 'Open Sans Condensed';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v11/gk5FxslNkTTHtojXrkp-xBEur64QvLD-0IbiAdTUNXE.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
p {
  margin: 0 0 10px 0;
}
input {
  font-size: 20px;
}
.narrow-font {
  font-family: 'Open Sans Condensed', sans-serif;
}
.wide-font {
  font-family: 'Diplomata', cursive;
}
.set-width {
  width: 220px;
}
<p>
  <input type="text" size="10" class="narrow-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="narrow-font set-width" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font set-width" value="0123456789" />
</p>

おすすめ記事