6

配送/請求入力フォームがあり、入力フィールドを同じ幅にスタイリングするのに問題があります...

問題:
- フィールド<input type="text" size="X" />が異なるブラウザーでは異なるサイズでレンダリングされるように見える (リンクを参照)。
-さらに、選択フィールドも別の方法でレンダリングされるようです。
- Chrome/safari が選択フィールドの font-size プロパティに反応しないようです。

テキスト入力のサイズをスタイル設定し、クロスブラウザーでフィールドを選択する方法に関するガイダンスは、非常に役立ちます。

ブラウザごとに異なるスタイルシートを使用する必要があります...これらの入力フィールドだけですか? -ありがとう

4

2 に答える 2

4

最初にそのインラインの「サイズ」属性を削除します。入力フォームのスタイルを設定するには、CSS を使用する必要があります。

input[type="text"] {
    width: 100px;

    /* You can also style padding, margins and everything else,
     * just remember that inputs of type "text" can only be one line. 
     */
}

[type="text"] をセレクタとして使用しないでください。この例では、「テキスト」タイプの入力フィールドに関連付けるために使用していましたが、クロスブラウザーが完全にサポートされているわけではありません。テキスト入力フィールドには、スタイルを設定する独自のクラスを指定する必要があります。

また、CSS のリセットを忘れずに、マージン、ボーダーなどを確認してください。アル。すべてのブラウザでリセットされます。http://meyerweb.com/eric/tools/css/reset/

于 2010-03-16T16:58:49.507 に答える
0

最近では、適切なブラウザー サポートに達したch単位を使用して、「サイズ設定された」入力の幅を正規化することが可能です。

残念ながら、まだ次のように書くことはできません。

input[size] {
  width: attr(size) "ch";
}

したがって、使用することがわかっている幅をスタイルする必要があります。

input[size="10"] {width: 10ch;}
input[size="20"] {width: 20ch;}
input[size="30"] {width: 30ch;}
/* etc. */

これは、CSS プリプロセッサーを使用して簡単に自動化できます。

アップデート：

テストフィドルを作りました。今日 (2018 年 2 月) の時点で、これは Chrome 63、Edge 41、FF 58 を搭載した Windows 10 で動作しています。IE 11 では失敗します。OS Xでは試していません。

于 2016-07-15T09:50:31.557 に答える