Select2ボックス内のテキストのパディングを変更するにはどうすればいいですか

Question

select2ボックスの高さを変更したり、いくつかの変更を加えることができましたが、今select2ボックスのテキストが中心に表示されますセレクトボックスと矢印の下側にも表示されます。なぜか分からないのですか？ここ ビュー画像https://i.stack.imgur.com/mckMI.jpg

.select2-container--bootstrap .select2-selection { 
 
    -webkit-box-shadow: 0; 
 
    box-shadow: 0; 
 
    background-color: #fff; 
 
    border: 0; 
 
    border-radius: 0; 
 
    color: #555555; 
 
    font-size: 14px; 
 
    outline: 0; 
 
    min-height: 48px; 
 
}

Answer 1

あなた.select2-selectionにtext-align: left;を追加し、あなたが親でtext-align: center;はそれを上書きするために、これを追加しておく必要があります。

text-align: left; 

は、この1つは助けるべき使用します、これは選択されたオプションテキストのラッパーです。利用下向き矢印の

.select2-selection__rendered { 
    margin: 10px; 
} 

：

.select2-selection__arrow { 
    margin: 10px; 
} 

$(function() { 
 
    $('#myselect').select2({ 
 
    placeholder: "select option", 
 
    selectOnClose: true 
 
    }); 
 
});

.select2-selection { 
 
    -webkit-box-shadow: 0; 
 
    box-shadow: 0; 
 
    background-color: #fff; 
 
    border: 0; 
 
    border-radius: 0; 
 
    color: #555555; 
 
    font-size: 14px; 
 
    outline: 0; 
 
    min-height: 48px; 
 
    text-align: left; 
 
} 
 

 
.select2-selection__rendered { 
 
    margin: 10px; 
 
} 
 

 
.select2-selection__arrow { 
 
    margin: 10px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js"></script> 
 

 

 
<div style="margin:30px; height:400px;"> 
 
    <select id="myselect" style="min-width:300px;"> 
 
    <option></option> 
 
    <option value='A'>A option thing</option> 
 
    <option value='B'>B option thing</option> 
 
    <option value='C'>C option thing</option> 
 
</select> 
 

 
</div>