html - 在选择输入字段中垂直对齐和使用填充

Question

您好，我正在尝试构建一个带有带有叠加标签的输入字段的表单。

问题是我想向输入字段的内容添加填充以正确对齐字段的值。这适用于我的常规文本输入字段，但不适用于选择输入字段。

谁能告诉我为什么它不起作用？

最好的展示方式是查看 fiddle : https://jsfiddle.net/pmrcdzbu/

<div class="inputgroup">
            <select class="input filled" id="dropdown">
                <option value="1">Collect</option>
                <option value="2">Electronic transfer</option>
                <option value="3">Private</option>
                <option value="4">Cash</option>
            </select>
            <div class="errorTooltip errorTooltipRequired ng-binding ng-scope" id="etntavq">Verplicht</div>
            <label for="billingLine1" id="billingLine1Label" class="binding">Payment method</label>
            <div class="browse-btn" id="dropdown-btn">
                <i class="fa fa-caret-down" aria-hidden="true"></i>
            </div>
        </div>
<style>
.Container .input, .Container .input option {
            height: 49px;
            width: 100%;
            padding: 0 14px;
            padding-top: 16px;
            border-radius: 5px;
            background-clip: padding-box;
            border: 1px solid #c5ccd1;
            color: #000;
            -webkit-transition: border-color .3s ease 0s;
            transition: border-color .3s ease 0s;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
            background: none;
            display: block;
            vertical-align: top;
            font-size: 1.2em;
        }
 </style>

还有第二件事我希望能够单击一个按钮，然后自动展开选择字段。我在堆栈上搜索但仍能找到正确的答案

Answer 1

重置选择输入的默认浏览器样式

select {
    -webkit-appearance: none;
    -moz-appearance : none;
}

查看此回复了解更多信息 https://stackoverflow.com/a/27006590/5610732