フォームの入力と選択タグの高さの問題

Question

こんにちは私はフォームを作っているので、同じ高さを与えて&の幅を入力して&の選択タグを選択タグが入力タグと同じ高さにならないようにします。 ....

あなたはまさに私が何を問題とselectタグの高さで唯一の画素差分提案することができます....

ここであなたは、問題についてのアイデアを得るでしょうデモです： - http://jsfiddle.net/RCnQa/12/

Answer 1

あなたのselect &に高さを与える必要があることも、このためにbox-sizingプロパティを与えます。

select { 
    border:1px solid #ccc; 
    vertical-align:top; 
    height:20px; 
} 
input, select{ 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 

チェックIE8以上&でこのhttp://jsfiddle.net/RCnQa/16/

作品。

Answer 2

視覚的には決して同じではありません。以下を使用して選択し、CSSを更新：

select { 
    border:1px solid #cccccc; 
    vertical-align:top; 
    height:23px; 
} 

Answer 3

私のプロジェクトの選択ボックスで同じ問題が発生しました。私はここで述べたように、私はこのことができます願ってい

http://bavotasan.com/2011/style-select-box-using-only-css/

、選択ボックスの矢印を変更することで、それを固定.....

Answer 4

がbox-sizingを使用してみてください：

input, select, option { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
input, select { 
    width:100px; 
    height:20px; 
    border : 1px #ccc solid; 
    vertical-align:top; 
} 

例フィドル：http://jsfiddle.net/RCnQa/17/

Answer 5

11/21/17の最新のChromeでも、まだ固定された高さを設定する必要があるようです選択。

min-heightを設定する方が好きです。なぜなら、私にとっては気分がいいだけでなく、あなたが考慮していないフォントサイズを混乱させる可能性のあるあらゆる種類のプラグインがあるからです。これはクロッピングを避けるために少し安全です。

padding: .25rem .5rem; 
min-height: 2.5rem; 
font-size: 1.1em; 

注：現在、高さを強制しているので、垂直方向の詰め物を減らすことができます。

フォントサイズが変更されたときに高さを変更する場合は、paddingとmin-heightにemsを使用します。