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

Question 1

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

<!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短くなっています。スクリーンショットを参照してください。 Firefoxのスクリーンショット

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

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

うまくいきました！

Firefoxで修正済み

ちょっと待って、Chromeでもっとテストして...

Chromeのスクリーンショット

FFFFFFFUUUUUUUUUUUU

誰かがこれらをすべてのブラウザに並べる方法を教えてもらえますか？幅：すべて200pxを実行できないのはなぜですか、すべてのブラウザで表示が異なるのはなぜですか？また、テキストボックスと選択ボックスの高さが異なるのはなぜですか？どうすれば同じ高さにできますか？高さとラインの高さを試しましたが、役に立ちません。

解決：

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

コードは以下のとおりです。ボックスの高さも同じサイズに設定し、ボックス内のテキストをインデントして整列させています。また、Chromeには、配置を破棄する選択ボックスに使用する非常に奇妙な外観の境界線があるため、境界線を設定する必要があります。これは、HTML5サイト（IE9、Firefox、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>

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

Question 2

これは、<input type="text" />要素のデフォルトスタイルが<select>要素とわずかに異なるためです。たとえば、境界線、パディング、マージンの値が異なる場合があります。

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

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

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

オプション1を使用します。これは、オプション2には多くの作業が必要であり、不要なCSSが大量に発生するためです。しかし、一部のWeb開発者は、最初から始めて完全に制御することを好みます。

Question 3

これで近づきますが、そのレベルの精度はほぼ不可能です。

<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>

Question 4

異なるブラウザは、デフォルトで異なるスタイルを適用します。マージンとパディングの両方を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リセットスタイルシートを使用してから、複数のブラウザーでデザインの見栄えを良くするのが好きです。

Question 5

問題のselectタグとinputタグの両方にクラスを追加します。

<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これはブラウザをサポートするための修正です

Question 6

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>

そうすれば、テーブルセルの幅は入力の幅に固定されます。

したがって、そのようにすると、selectは常に残りの幅を取り、d入力と完全に一致します。

Question 7

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

select, input {
 border:0;
}

Question 8

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

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