web-dev-qa-db-ja.com

CSSでテキストと選択ボックスを同じ幅に揃えますか？

わかりました、これは正しくなるのは一見不可能です。テキストボックスと選択ボックスがあります。左マージンと右マージンに並ぶように正確に同じ幅にする必要があります。

_<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            input, select {
                width: 200px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br>
        <select>
            <option>123</option>
        </select>
    </body>
</html>
_

それはあなたが思うだろうね？いや。 Firefoxの選択ボックスは6px短くなっています。スクリーンショットをご覧ください。 screenshot in firefox

では、コードを編集して2つのスタイルを作成しましょう。

_<style type="text/css">
    input {
        width: 200px;
    }
    select {
        width: 206px;
    }
</style>
_

わかりました。

Fixed in Firefox

ちょっと待って、Chromeでもっと良いテストを...

chrome screenshot

FFFFFFFUUUUUUUUUUUU

誰かがすべてのブラウザでこれらを並べる方法を教えてもらえますか？なぜ幅だけをできないのですか：全部で200px、なぜすべてのブラウザがそれを異なって表示するのですか？また、テキストボックスと選択ボックスの高さが異なるのはなぜですか？それらを同じ高さにするにはどうすればよいですか？高さと行の高さを試してみました。

解決：

OK私は以下の回答からいくつかの助けを借りて解決策を見つけました。重要なのは、box-sizing：border-boxプロパティを使用して、includesボーダーとパディング。 ここでの優れた説明 を参照してください。その後、ブラウザはそれを詰め込むことができません。

コードは以下のとおりです。また、ボックスの高さを同じサイズに設定し、ボックス内のテキストをインデントして整列させています。境界線をChromeに設定する必要があります。Chrome$ ===には、選択ボックスに使用する非常に奇妙な境界線があります。 、Safari、Operaなど）。

_<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            input, select {
                width: 200px;
                border: 1px solid #000;
                padding: 0;
                margin: 0;
                height: 22px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }
            input {
                text-indent: 4px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br>
        <select>
            <option>123</option>
            <option>123456789 123123123123</option>
            <option>123456789 123123123123 134213721381212</option>
        </select>
    </body>
</html>
_

最後の警告として、入力ボタン、チェックボックスなどをこのスタイリングに含めたくない場合があります。特定のタイプに適用しない場合はinput:not([type='button'])を使用するか、必要なものを指定するには_input[type='text'], input[type='password']_を使用します適用する。

htmlcsshtml5textboxdrop-down-menu
81
zuallauz

これは、<input type="text" />要素のデフォルトのスタイルは、<select>要素ボーダー、パディング、マージンの値は異なる場合があります。

これらのデフォルトのスタイルは、FirebugのFirebugやChromeの組み込みのものなどの要素インスペクターを使用して確認できます。さらに、これらのデフォルトのスタイルシートはブラウザごとに異なります。

次の2つのオプションがあります。

  1. 境界、パディング、マージンの値を両方の要素で同じになるように明示的に設定します
  2. 独自のCSSスタイルシートの前に含めるCSSリセットスタイルシート

オプション2には多くの作業が必要であり、多くの不要なCSSになってしまうため、オプション1を選択します。ただし、一部のWeb開発者は、ゼロから開始して完全に制御することを好みます。

7
Chris Cannon

これはあなたを近づけますが、そのレベルの精度はほとんど不可能です。

<div style="width: 200px"><input type="text" style="width: 100%; margin: 0; padding: 0" /></div>
<div style="width: 200px">
    <select id="Select1" style="width: 100%; margin: 0; padding: 0">
        <option>1</option>
    </select>
</div>
3
saluce

デフォルトでは、ブラウザごとに異なるスタイルが適用されます。マージンとパディングの両方を0にリセットすると、FirefoxとChromeの両方で両方の要素の幅が等しくなることがわかりました。

<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            input, select {
                margin: 0;
                padding: 0;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br />
        <select>
            <option>123</option>
        </select>
    </body>
</html>

私は個人的に YUI CSS Reset のような最小限のCSSリセットスタイルシートを使用してから、デザインを複数のブラウザーで見栄えよくしようとしています。

3
Thomas Upton

問題の選択タグと入力タグの両方にクラスを追加します。例：

<input class='custom-input'/>
<select class='custom-input'></select>

次に、デザインに合わせて以下のCSSを変更します。

.custom-input {
        width:140px;
        border:1px solid #ccc;
        margin:1px;
        padding:3px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -ms-box-sizing:content-box;
        -moz-box-sizing:content-box;
        -webkit-box-sizing:content-box;
        box-sizing:content-box;
    }

obvsこれはブラウザをサポートするための修正です

2
Matt Jameson

両方の要素からデフォルトの境界線を削除してみてください：

select, input {
 border:0;
}
0
dotNET Lady

Uが表4の入力を使用する場合、uは次のソリューションを使用できます。ie7との互換性もあります。

<tr style="width:1px;"><td style="width:inherit;position:relative;">
    <select style="width:100%;"> 
    </select> 
</td></tr>
<tr><td>
    <input type="text" style="width:150px;"/>
</td></tr>

これにより、テーブルのセル幅が入力の幅に固定され、

したがって、この方法では、選択は常に残りの幅を使用し、d入力と完全に整列します。

0
Anonymous

はい、非常にイライラします。ただし、「<！DOCTYPE html>」タグをHTMLページの上部に配置するまで、問題はありませんでした。私のウェブページはすべてのプラットフォームで適切にレンダリングされ、そのタグをドキュメントの先頭に置くまでテストできました。

それは「本物の仕様」ですが、それがこれらのアライメント問題の原因であるようです。 FWIW、HTML5を指定するためにそのタグなしでHTML5要素、インラインCSSなどを使用しています。 YMMV。

0
Sid Lori