html - 下拉和文本框的高度不等

Question

我在 css 中创建了一个可以美化表单对象的类。我观察到下拉和文本框的高度呈现不同，下面的屏幕截图以及 css 和 jsfiddle。

CSS

    input,select.effect {
    border:1px solid #ccc;
    height: 20px;
    padding:3px;
    width:97%;
    font-size:14px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }

html

<div class="formcontainer">
<form id="bank_details" name="bank_details" action="">
<fieldset><legend>Primary Bank Details</legend>

<div class="bank_name">
<label>Bank Name:</label>
<br />
<select name="" class="effect">
<option value="">Tamilnad Mercantile Co-Operative Bank</option>
</select>
</div>

<div class="account_no">
<label>Account No:</label>
<br />
<input type="text" name="" class="effect" id="" />
</div>
</fieldset>
</form>
</div>

JSFiddle

Answer 1

我分离了文本输入的样式，选择标签并删除了高度属性。尽管不建议使用这种编码，但它看起来已修复。

 select.effect {
    border:1px solid #ccc;

    padding:3px;
    width:97%;
    font-size:14px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }
input{
    border:1px solid #ccc;

    padding:3px;
    width:97%;
    font-size:14px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }

Answer 2

您可以通过设置box-sizing属性来修复它，将其添加到您的规则中

input, select.effect {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

演示小提琴

Answer 3

将两种样式分开：

input.effect {
 border:1px solid #ccc;
 height: 27px;
 padding:3px;
 width:97%;
 font-size:14px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}
 select.effect {
 border:1px solid #ccc;
 height: 35px;
 padding:3px;
 width:97%;
 font-size:14px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}

jsFiddle

Answer 4

您可以对两个类使用相同的 css 样式，并通过向 select 元素添加高度来使用内联 css：

<select name="" class="effect" style="height:30px">...
...

希望能解决。

Answer 5

添加一些盒子大小：http: //jsfiddle.net/5BdpQ/4/

input,select.effect {
    border:1px solid #ccc;
    height: 20px;
    padding:3px;
    width:97%;
    font-size:14px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Answer 6

不要设置默认选择标签的样式。这不是跨浏览器。对于自定义样式选择使用 JQ 自定义表单插件，如http://vebersol.net/demos/jquery-custom-forms/