How to add Padding in Select

Question

How to add Padding in Select

Navigation

#1 by (0 votes)

0

I put a padding of 30px, the select actually gets bigger but it does not 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><linkhref="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>

html bootstrap

asked by anonymous 29.12.2016 / 22:07

1 answer

SQL DATA EXECUTION - ODBC View PDF with AngularJS callback

score 0 · Answer 1

Guilherme, what happened in your case is that Boostrap has its own styles and its important padding is pushing the text in such a way that it disappears.

I tried increasing the height using important in your select.custom and the text appeared:

height:80px!important;

And to appear the traditional set of select you simply remove the lines from your custom styles:

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