24

HTML ページに入力要素を並べるためのリソースを見つけたいと思っています。width スタイル属性を使用しても、select 要素とテキスト ボックスを同じ幅にするのは難しく、ブラウザー間ではさらに困難です。最後に、ファイル入力は、同じ幅のクロス ブラウザーに到達することは不可能のようです。これを達成するための良いガイドやヒントはありますか? おそらく、設定すべきデフォルトの CSS 属性がいくつかあるでしょう。

4

9 に答える 9

17

Internet Explorer 7、Firefox 3、および Safari/Google Chrome でこれをテストしました。<select>との問題は間違いなくわかります<input type="file">。私の調査結果によると、すべての入力を同じ幅でスタイルすると<select>、すべてのブラウザーで約 5 ピクセル短くなります。

Eric Meyerの CSS リセット スクリプトを使用してもこの問題は解決しませんが、単純に<select>入力を 5 ピクセル広くすると、主要なブラウザーで (完全ではありませんが) 非常に適切な位置合わせが得られます。唯一異なるのは Safari/Google Chrome で、他のすべてのブラウザーよりも 1 ～ 2 ピクセル幅が広いように見えます。

に関する限り<input type="file">、そこでのスタイリングにはあまり柔軟性がありません。JavaScript がオプションである場合は、quirksmodeに示されているメソッドを実装して、ファイル アップロード コントロールのスタイルをより詳細に制御できます。

一貫した入力幅を持つ典型的なフォームについては、以下の XHTML 1.0 Strict の完全な動作例を参照してください。これは、一貫性のない幅で同じ問題があるため、ここで他の人が指摘した 100% 幅のトリックを使用しないことに注意してください。さらに、テーブルはレイアウトではなく表形式のデータにのみ使用する必要があるため、フォームのレンダリングに使用されるテーブルはありません。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Example Form</title>
  <style type="text/css">
    label,
    input,
    select,
    textarea {
      display: block;
      width: 200px;
      float: left;
      margin-bottom: 1em;
    }
    
    select {
      width: 205px;
    }
    
    label {
      text-align: right;
      width: 100px;
      padding-right: 2em;
    }
    
    .clear {
      clear: both;
    }
  </style>
</head>

<body>
  <form action="#">
    <fieldset>
      <legend>User Profile</legend>
      <label for="fname">First Name</label>
      <input id="fname" name="fname" type="text" />
      <br class="clear" />

      <label for="lname">Last Name</label>
      <input id="lname" name="lname" type="text" />
      <br class="clear" />

      <label for="fav_lang">Favorite Language</label>
      <select id="fav_lang" name="fav_lang">
        <option value="c#">C#</option>
        <option value="java">Java</option>
        <option value="ruby">Ruby</option>
        <option value="python">Python</option>
        <option value="perl">Perl</option>
      </select>
      <br class="clear" />

      <label for="bio">Biography</label>
      <textarea id="bio" name="bio" cols="14" rows="4"></textarea>
      <br class="clear" />
    </fieldset>
  </form>
</body>

</html>

于 2008-10-08T06:16:18.097 に答える
13

私は通常、それらを必要な幅の div またはテーブル セル (恐ろしい! 私は知っています) 内に配置し、select および input style:width を 100% に設定して、それらが入っている div / セルを埋めます。

于 2008-10-07T22:09:30.357 に答える
2

select要素とinput要素の境界線とパディングを 0 に設定すると、それらは同じ幅になることがわかりました。(Chrome 14、Firefox 7.0.1、Opera 11.51、IE 9 でテスト済み)

選択要素と入力要素に 1 ピクセルの境界線/パディングを配置すると、入力要素が 2 ピクセル広くなります。例えば：

<form class="style">
    <input name="someInput" />
    <select name="options">
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
    </select>
</form>

.style select {
    width: 100px;
    padding: 1px;
    border: 1px solid black;
}
.style input {
    width: 96px; /* -2 px for 1px padding(1px from each side) and -2px for border
    (select element seems to put border inside, not outside?) */
    padding: 1px;
    border: 1px solid black;
}
于 2011-10-22T18:01:45.443 に答える
1

幅以外に、ボーダーとマージンも設定します。これらはコントロールに影響する場合としない場合があります。このようなものが役立つかもしれません：

input, select {
    width: 100px;
    margin: 0px;
    border: 1px solid;
}

ロンも良い考えを持っています。

于 2008-10-07T22:11:53.427 に答える
0

ロンのアイデアはうまくいかないと思います...

テストケース：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <link href="styles/reset.css" rel="stylesheet" type="text/css"/>

    <style type="text/css">
        input, select{
            width: 100%;
        }
    </style>
</head>
<body>

<div style="width: 200px;">
    <input type="text">
    <select>
        <option>asdasd</option>
        <option>asdasd</option>
    </select>

</div>

</body>
</html>

これにより、入力がselectよりも数ピクセル広くなります（これはおそらくOSに依存します）。選択のスタイルはOS（少なくともWindowsテーマ）に依存しているように見えるので、+ 5pxのトリックを使用しても、これが達成できるかどうかはわかりません。

于 2009-11-17T16:33:34.660 に答える
0

これは、<input> を使用すると、境界線とパディングが幅に追加されるためです (他のほとんどの要素と同様)。<select> を使用すると、古い IE quirks モードと同様に、境界線とパディングが幅に含まれます。

これを考慮して幅を大きくすることで、これを回避できます。

input  { width: 200px; padding: 10px; border-width:5px; }
select { width: 230px; padding: 10px; border-width:5px; }

または (ブラウザーのサポートに依存できる場合)、新しい CSS3 box-sizing プロパティを使用して一貫した動作をさせ、要素の幅の外側にパディングとボーダーを描画できます。

input, select {
  width: 200px;
  padding: 10px;
  border-width:5px;
  -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: content-box;    /* Firefox, other Gecko */
  box-sizing: content-box;         /* Opera/IE 8+ */
}

または、box-sizing を border-box に設定して、ボックスの幅の内側にパディングを描画して、入力を選択のように動作させることもできます。

Chrome、IE8、FF でテスト済み

于 2012-06-13T09:22:18.980 に答える
0

どうしても { width: 100%; が必要な場合。ピクセル単位の幅で指定されていない場合、jQuery はあなたの友達です。

$(function () {
    var allSelects = $('input[type="text"], textarea');
    allSelects.css('width', (allSelects.width()-6)+'px');
}

-6 ピクセルが私 (FF9) に最適です。必要に応じて編集してください。

于 2012-02-02T13:09:31.597 に答える
0

いくつかの基本設定で CSS ファイルを開始しますか? すべての要素でパディングとマージンをオフにすると便利な場合があります。これが選択/入力要素に影響を与える可能性があるかどうかを確認するためにテストしていません。

Eric Meyer による CSS リセットの例を次に示します。

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

于 2008-10-07T22:11:42.880 に答える
0

ファイル入力はブラウザーによって根本的に異なる可能性があり、カスタマイズの方法があまり許可されていないことは間違いありません。これは面倒な場合がありますが、それがセキュリティの観点からである理由も理解しています. たとえば、ほとんどのブラウザに表示される「参照」ボタンのテキストを変更してみたり、Safari でのファイル入力を他のブラウザと比較したり…

于 2008-10-07T23:52:22.880 に答える