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

Posted 2023-05-07

【中文标题】如何更改 Select2 框中文本的填充

【英文标题】：How do I change the padding of the text in a Select2 box

【发布时间】：2017-10-21 06:16:14

【问题描述】：

我已经能够改变一个选择2框的高度，也适用于一些小的变化，但现在我的问题是在选择2框中的文本显示在选择框的中心，也是在向下箭头上。我只是不知道为什么？ P>

这里显示图像：

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

【参考方案1】：

将text-align: left; 添加到您的.select2-selection，您的父级必须有一个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>