How do I change the padding of the text in a Select2 box

Question

I have been able to change the height of a select2 box and also apply some few changes but my problem now is the text in the select2 box appears at the center of the select box and also at the top of the arrow down. I just do not know why?

View image here:

.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

Add text-align: left; to your .select2-selection, you must have a text-align: center; in parent so add this to overwrite it:

  text-align: left;

Use this one should help, this is the wrapper of the selected option text.

.select2-selection__rendered {
  margin: 10px;
}

For the arrow down use:

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