css – 如何更改Select2框中文本的填充

我已经能够更改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;
}

添加text-align：left;在你的.select2选择中,你必须有一个text-align：center;在父级中,所以添加此项以覆盖它：

text-align: left;

使用这个应该有帮助,这是所选选项文本的包装.

.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>