How to add Padding in Select

Question

I put a 30px padding, the select really gets bigger but it doesn’t appear anything.

select.custom{
    padding: 30px!important;
    -moz-appearance: none;
    -webkit-appearance:none;
}
select.custom option{
    padding: 30px!important;
    -moz-appearance: none;
    -webkit-appearance:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12">
<select class="form-control custom">
<option>AAAAAAAAAAAAAA</option>
</select>
</div>

Answer 1

William, what happened in your case is that Boostrap has its own styles and its padding with Important is pushing the text in such a way that it goes away.

I tried increasing the height using Important in your select.custom and started to appear the text:

height:80px!important;

And to appear the traditional arrow of select just remove from your custom styles the lines:

-moz-appearance: none;
-webkit-appearance:none;