在選擇輸入字段中垂直對齊和使用填充

Question

嗨，我正在嘗試構建一個帶有疊加標籤的inputfieled表單。

問題是我想添加填充到輸入字段的內容以正確對齊字段的值。這適用於我的常規文本輸入字段，但不適用於選擇輸入字段。

有人能告訴我爲什麼它不起作用嗎？顯示

最好的辦法是看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>

還有就是我希望能夠點擊一個按鈕，然後自動uncollapse選擇場的第二件事。我搜索堆棧，但可以找到正確的答案卻

Answer 1

重置瀏覽器默認樣式的選擇輸入

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

詳情參見該響應https://stackoverflow.com/a/27006590/5610732