CSS：删除选择元素内的填充答案

【问题标题】：CSS: Remove padding within select elementCSS：删除选择元素内的填充
【发布时间】：2018-04-09 23:07:49
【问题描述】：

我正在尝试从选择元素中删除填充，以便其中的文本与其正下方的输入元素中的文本对齐。

我已经尝试过以下方法。

select{
    padding-left:0;
    }

有什么想法吗？

JSfiddle 在这里 http://jsfiddle.net/pLSkH/2/

【问题讨论】：

标签： css select padding

【解决方案1】：

从选择 css 中删除 text-indent: 3px;

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

http://jsfiddle.net/pLSkH/4/

text-indent: 3px;导致相对于左侧的水平间距，所以它看起来像padding

【讨论】：

哎呀，是的。选择框在 Dreamweaver 中以 text-indent: 0; 奇怪呈现。不过在 JSFiddle 中看起来不错。
其实这不是解决办法，select框还是有padding的，text-indent为0后input里面的文字在selectbox里面还是不一样的。

【解决方案2】：

我已经通过使用负值解决了 Chrome 和 Firefox 中的填充问题（我想删除左侧的“填充”）：

style=text-indent:-3px;

【讨论】：

仅在 FF 中为我工作，Chrome 左侧没有任何填充，因此这引入了另一个问题。

【解决方案3】：

你的 jsfiddle 有一些小的 html 错误：

您不应该在标签和输入周围都加上标签。

应该是：

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

当我更正 html 时，很多 css 都发生了变化。你可以看看我的结果是不是你想要的：http://jsfiddle.net/pLSkH/3/

【讨论】：

将输入包装在标签中很好/有效/很好。在这种情况下，不需要标签的for 属性。
w3c 说以这种方式使用它是可以的 - 显然它被称为标记控件。感谢@Moob 的提示：'for' 属性
哦，我明白了。哎呀！那请不要理我！
@BriceLin 如果你愿意，你可以删除你的答案，别担心，我和你的想法一样，所以我今天也学到了一些东西：D
@MackieeE 至少其他人也学到了一些东西，哈哈。我决定把它留在上面，以便其他不太了解的人知道。