BinaryDevelop
  1. ホーム
  2. ハイパーリンク

[解決済み】入力サイズと幅の関係

2022-04-06 13:28:58

質問 

<input name="txtId" type="text" size="20" />

または 

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

最適なクロスブラウザコードはどれ？

もちろん要件にもよりますが、みなさんがどのように、何を基準に決めているのか知りたいです。

どのように解決するのか？

両方を使用することができます。cssのスタイルで上書きされるのは size 属性は、CSSをサポートしているブラウザではフィールドを正しい幅にし、そうでないブラウザでは指定された文字数にフォールバックします。

編集する ということを記載しておくべきでした。 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>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します