フォーム部品の高さが合わない

CSS で input や button の外観を調整してすべての高さを揃えようとしています。
フォントサイズや line-height を揃えれば height を指定しなくても高さは揃うと考えていたのですがブラウザによって解釈がバラバラです。

Safari

Firefox

Chrome

Chrome が理想に近いですが上に赤い線が見えてしまっていたりボタンがやや小さいようです。上下の赤い部分が完全に隠れるのが目的とする形です。

何かをリセットしていけばこれらの差はなくなるのでしょうか？
あるいは height を指定しない限り合わせることはできないのでしょうか。
よろしくお願いします。

html
1    <form>
2        <div class="group">
3            <input type="text"><input type="search"><button type="submit">Submit</button>
4        </div>
5    </form>

css
1    body {
2        box-sizing: border-box;
3        padding: 0;
4        background: gray;
5    }
6
7    *,
8    *:before,
9    *:after {
10        box-sizing: inherit;
11    }
12
13    input, button {
14        vertical-align: baseline;
15    }
16
17    [type="text"],
18    [type="search"] {
19        -webkit-appearance: none;
20        margin: 0;
21        padding: 5px 10px;
22        line-height: 1;
23        background: #eee;
24        border: 1px solid #ccc;
25        outline: none;
26    }
27
28    [type="submit"],
29    button {
30        -webkit-appearance: none;
31        border: 1px solid #ccc;
32        margin: 0;
33        padding: 5px 10px;
34        overflow:visible;
35        line-height: 1;
36    }
37
38    .group {
39        background-color: crimson;
40        padding: 0 15px;
41        margin: 15px;
42    }

行動規範の内容に同意します

回答3件

ベストアンサー

リセットのためのCSSをつかうとか、appearance: none; を試してみるとかどうでしょう。

【CSSリセットはこれで決まり！モダンブラウザによる相違を吸収するようカスタマイズされたスタイルシート -ress | コリス】
http://coliss.com/articles/build-websites/operation/css/modern-css-reset-ress.html

【フォーム周りで覚えておくと便利なCSS Snippets | NxWorld】
http://www.nxworld.net/tips/15-useful-css-snippets-in-form-style.html

投稿2017/05/31 10:45

kei344

総合スコア69398

環境による違いを吸収するのは大変なので、外枠を使って、実際の各要素の高さはズレているけど見た目だけは高さが合っているように見せるっていう方法がおすすめです。

css
1 body {
2      box-sizing: border-box;
3        padding: 0;
4        background: gray;
5    }
6    .group{
7    display:table;
8    }
9    .input_wrap,.button_wrap{
10      display:table-cell;
11      overflow:hidden;
12    }
13    .input_wrap{
14      background:#fff;
15     }
16    .input_wrap:first-child{
17      border-right:1px solid #ccc;
18    }
19    .button_wrap{
20    background:#33c;
21    }
22    input{
23      background:#fff;
24      border:none;
25      padding:5px;
26    } 
27    button{
28    background:#33c;
29     border:none;
30     padding:5px;
31    }

html
1 <form>
2        <div class="group">
3            <div class="input_wrap">
4              <input type="text">
5            </div> 
6            <div class="input_wrap">
7              <input type="search">
8            </div> 
9            <div class="button_wrap">
10              <button type="submit">Submit</button>
11            </div>
12        </div>
13    </form>