下拉和文本框的高度不同

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

分开两种风格：

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 2

我将文本输入的样式分开，然后选择标记并删除了height属性。虽然不建议采用这种编码，但看起来很复杂。

 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 3

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

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

<强> Demo fiddle

Answer 4

您可以对这两个类使用相同的css样式，并通过向select元素添加height来使用内联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/