2016-12-02 6 views
0

こんにちは、私はoverlayerdラベルを持つ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ボタンをクリックできるようにしたいと第二のものがあります。私は、スタック上で検索が、正しい答えを見つけることができる、まだ

答えて

1

それがあったその詳細https://stackoverflow.com/a/27006590/5610732

+0

ため、この応答はありがとう参照セレクト入力用

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

をデフォルトのブラウザのスタイルをリセットし、私はそれを知っていました単純なものでなければならなかった。それを見つけることができませんでした –

関連する問題