CSS：删除select元素中的填充

我试图删除select元素中的填充，以便其中的文本与它正下方的输入元素中的文本对齐

我试过下面的方法

select{
    padding-left:0;
    }

有什么想法吗

我在这儿闲逛

---

您的JSFIDLE有一些小的html错误：

• 您不应该在标签和输入周围都包装标签

应该是：

<label for "Firstnameame">First Name</label>
<input type="text" name="Firstname">

名字

---

当我修改html时，很多css都改变了。你可以查看我的文件是如何产生的，看看这是否就是你想要的：

删除

文本缩进：3px从选择css

input, select {
    float: right;
    width: 50%;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    font-family: Calibri;
    font-size: 12px;
}


文本缩进：3px
导致相对于左侧的水平间距，因此它看起来像是一个
填充
我已经通过使用负值解决了Chrome和Firefox中的填充问题（我想删除左侧的“填充”）：

样式=文本缩进：-3px
 用标签包装输入是好的/有效的/好的。在这种情况下，不需要标签的
for
属性。w3c表示可以这样使用它-显然它被称为标签控件。谢谢@Moob给我的提示，我明白了。哎呀！请不要理我@BriceLin如果你愿意，你可以删除你的答案，别担心，我的想法和你一样，所以我今天也学到了一些东西：D@MackieeE至少其他人也学到了一些东西，哈哈。我决定让它开着，这样其他不知道的人也会知道。哇，是的。选择框在Dreamweaver中以文本缩进：0；的方式奇怪地呈现；。虽然在JSFIDLE中看起来不错。实际上，这不是解决方案，选择框中仍然有填充，即使文本缩进为0，输入中的文本在选择框中也不相同。仅在FF中适用，Chrome在左侧没有任何填充，因此这引入了另一个问题。