CSS - 相同的类，但文本框/下拉框的长度不同？

Question

我在我的下拉框中使用了相同的样式，以及一个工作正常的文本框，除了它们的长度不同，只有~10px

http://jsfiddle.net/PkWVg/

如果不为每个人使用单独的课程，我似乎无法获得相同的长度。事实上，最后的下拉图标似乎是更右边的那个？

CSS：

#container {
    width:500px;
}
.form-textbox, .form-dropdown {
    border: 0;
    outline: 0;
    height: 20px;
    width:100%;
    padding-left: 10px;
    background-color: rgb(204, 204, 204);
    color: #666;
}

HTML：

<div id="container">
    <select class="form-dropdown " name="turnover" />
    <option value="1">Less than £49,999 per year</option>
    <option value="2">£50,000 - £99,999 per year</option>
    <option value="3">£100,000 - £249,999 per year</option>
    <option value="4">£250,000 - £499,999 per year</option>
    <option value="5">£500,000 - £999,999 per year</option>
    <option value="6">£1,000,000 or more per year</option>
    </select>
    <br>
    <p>
        <input class="form-textbox ofTextbox" name="market" type="text" />
    </p>
</div>

Answer 1

申请box-sizing

.form-textbox, .form-dropdown{
    border: 0;
    outline: 0;
    height: 20px;
    width:100%;
    padding-left: 10px;
    background-color: rgb(204, 204, 204);
    color: #666;
   -moz-box-sizing: border-box; // Added rule
   -webkit-box-sizing: border-box; // Added rule
    box-sizing:border-box; // Added rule
}

Fiddle

Answer 2

添加：

-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;

Answer 3

padding-left:10px似乎是个问题。如果删除它，则字段长度相同。