2

一部のフォームの入力フィールドに太字のテキストを含めるように求められた権限。問題は、スタイルシートでこれを行うための素朴な方法です。

input {
    font-weight: bold;
}

このHTMLの使用：

1234567890
<input type="text" maxlength="10" size="10" value="1234567890"/>

すぐに問題が発生しました。すべての入力ボックスが広すぎます。

余分なスペースに注意してください

私はそれをYahooのリセットに絞り込みました。これは入力ボックスにfont: inherit親（ドキュメントの本文）からの指示を出します。これは私が望む振る舞いです-入力ボックスは親本体と同じフォントを持ちます。しかし、フォントを指定するか、継承を使用するとすぐに、入力ボックスの幅が広すぎます。これはIEとFirefoxで同じなので、おそらくブラウザの互換性の問題ではありません。

実際の動作をご覧ください：http：//jsfiddle.net/clintp/bZChP/3/

入力ボックスのフォントを指定するにはどうすればよいですか？ただし、適切なサイズになっていますか？

更新：「適切に」 http://jsfiddle.net/clintp/bZChP/5/ 右側の入力ウィジェットは、データに合わせて適切なサイズになっていますが、左側の入力ウィジェットは適切なサイズではありません。目標は、アプリケーションのすべての入力ボックスのボックスサイズをフィールドごとに指定することなく、両方のボックスを同じサイズ、同じテキストフォント（1つは太字で！）にすることです。（数千あります。）

4

4 に答える 4

2

実際には、モノスペースを使用しない限り、入力フィールドのサイズを確実に設定することはできません。モノペースフォントの場合でも、ブラウザにはフィールド幅の計算にバグがあります。size属性を使用してHTMLのみで表示幅を設定し、CSSでフォントサイズとファミリを設定して、正常に機能していると思われる等幅フォントを一覧表示すると、おそらく最も一貫した結果が得られます。例えば、

input {フォント：100％Lucida Console、モノスペース; }

<input size=10>これにより、一部のブラウザで、たとえばフィールドの幅が約12文字になるという問題に対処できます。

入力ボックスが親本体と同じフォントであるという要件に関しては、親でも等幅フォントを使用する必要があります。☺まじめな話ですが、プロポーショナルフォントを使用して入力フィールドの幅も設定できるはずですが、うまくいきません。ユニットをサポートするブラウザch（動作する場合は数値入力の問題になります）でさえ、一貫性がなく誤って実行されるため、たとえばwidth: 10ch、入力0000000000に対しても正しいレンダリングが得られません。

于 2012-10-10T16:34:22.627 に答える
0

フォントのサイズと太さの両方を調整するCSSクラスを作成します。スタイルを設定する入力でそのクラス名を使用します。

<input class="bold" type="text" maxlength="10" size="10" value="1234567890"/>

.bold {
    font-weight:bold;
    font-size:10px;
}
于 2012-10-10T15:14:34.630 に答える
0

:)最初に、あなたの質問へのあなたのインプットのあなたの親は何ですか？

これをcssに追加するだけです。

yourparent input
{
    font-weight:regular /* Just set a value like your parent of input*/;
}
于 2012-10-10T15:22:30.087 に答える
0

太字の入力に固定幅を設定してみませんか？

http://jsfiddle.net/pBXbY/

于 2012-10-10T15:58:27.603 に答える