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

我的下拉框和文本框使用了相同的样式，但它们的长度不同，只有10px左右

如果不使用单独的类，我似乎无法获得相同的长度。实际上，最后的下拉图标似乎应该更右边

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;
}

<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>

HTML:

#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;
}

<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>

每年少于49999英镑
每年50000英镑-99999英镑
每年100000英镑-249999英镑
每年250000英镑-499999英镑
每年500000英镑-999999英镑
每年1000000英镑或以上

应用

添加以下内容：

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

---

左侧填充：10px

似乎是问题所在。如果删除该选项，则字段长度相同。

请看这里：我可以在小提琴中看到！它似乎取决于浏览器-moz框大小：边框框；工作正常。对mozila来说是

-moz框大小调整

，对于safari和chrome等webkit浏览器来说是

-webkit框大小调整

：）需要填充来定位文本。