入力と選択フィールドの幅を等しくする方法


109

フォームには、1つの選択フィールドと2つの入力フィールドがあります。これらの要素は垂直方向に整列しています。残念ながら、これらの要素の幅を同じにすることはできません。

これが私のコードです:

<select name="name1" style="width:198px">
  <option>value1</option>
  <option>value2</option>
</select><br/>
<input type="text" name="id1" style="width:193px"><br/>
<input type="text" name="id2" style="width:193px">

上記の例の場合、select要素の最適な幅は198または199 pxです(もちろん、193pxを試しましたが、違いは大きなものです)。これらの要素の幅は同じではないため、解像度に依存します(さまざまなコンピューターやブラウザーによって異なります(場合によっては、約1ピクセルまたは2ピクセルの違いと思います)。これらの要素をdivまたはテーブルの行に設定しようとしましたが、役に立ちません。

Q:これらの要素の幅を正確に等しくするにはどうすればよいですか?


1
同じ質問はここで尋ねた:stackoverflow.com/questions/895904/...
BLAM

回答:


134

回答を更新しました

すべてが同じように動作するように、input / textarea / select要素で使用されるボックスモデルを変更する方法を次に示します。box-sizing各ブラウザのプレフィックスで実装されるプロパティを使用する必要があります

-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box; 
box-sizing:content-box;

これは、前述の2pxの違いが存在しないことを意味します。

http://www.jsfiddle.net/gaby/WaxTS/5/の

注: IEでは、バージョン8以降で動作します。


元の

境界線をリセットするselect要素は常にinput要素より2ピクセル小さくなります。

例:http : //www.jsfiddle.net/gaby/WaxTS/2/


返信ありがとうございます。そして、2pxのボーダーを設定すると、入力フィールドと選択フィールドの間に4ピクセルがあり、3pxボーダー-6px ...?
luk4443 2010年

1
@luk、いいえ。入力との両方が同じ境界線の幅を持って選択した場合、その後の違いは、2つのピクセル..に残る
ガブリエレPetrioli

ありがとう。私はさまざまなブラウザでコードを試してみましたが、Firefoxではすべて問題ありませんが、IE 8とOperaでは機能しません(入力と選択幅の違いがあります):(
luk4443

1
おそらくあなたはボックスサイズを指定するつもりでした:border-box?それがあなたの言った意味だと思います。Content-boxは、パディングとマージンが幅に追加されるデフォルトです。
O'Rooney

1
実際には次のようになります。-ms-box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; ボックスサイズ:コンテンツボックス; 標準構文は最後に段階的な拡張方法論に従う必要があります。これにより、将来、標準が広く実装されたときに、ユーザーエージェントはデフォルトで標準構文を使用し、プレフィックス付きのバージョンを削除できます。
user1739635 2015年

118

上記のGabyの回答(+1)を試しましたが、私の問題は部分的にしか解決されませんでした。代わりに、content-boxがborder-boxに変更された次のCSSを使用しました。

input, select {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

うん、フォームフィールドの例:textarea、入力フィールドは常にボーダーボックスモデルでうまく機能するようです。ボタン、チェックボックス、ラジオ、送信、リセット、および検索入力は、デフォルトではボーダーボックスです。
Vennsoh 2013

2
ここでは良いことだあなたが使用すべき理由のための引数はbox-sizing: border-box。優れた普遍的な実装では、最上位のhtml要素を設定してから継承することを検討して、簡単に上書きできるようにします。
KyleMit

content-boxは私の場合何もしませんでした。それらが同じ幅になるようにボーダーボックスが必要でした。ボーダーボックスは間違いなく優れたソリューションです。
Manuel Hoffmann

5

このコードをcssに追加します。

 select, input[type="text"]{
      width:100%;
      box-sizing:border-box;
    }

-4

別のクラスを作成し、2pxの例でwithサイズを増やします

.enquiry_fld_normal{
width:278px !important; 
}

.enquiry_fld_normal_select{
width:280px !important; 
 }
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.