Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add padding between options in select input?

Tags:

css

How to add padding to my select input options? Here is my CSS and all options seem below each other without any spacing (in terms of height of option) I have a CSS reset.. aside from that how can I give the options a bit of height to make it look good?

.upload-input select {
    display: block;
    font-size: 14px;
    color: #888;
    width: 616px;
    background: #fff;
    border: 1px solid #ccc;
}

Update

I applied the suggested css. It does not look right.

enter image description here

like image 220
Ahmed Fouad Avatar asked May 30 '12 22:05

Ahmed Fouad


People also ask

How do I give padding to select option?

For vertical padding you can use line-height. If you don't need border, you can specify border and make it the same color as the select element background, it will give you padding appearance. box-shadow can be used to add stroke to the element if really needed.

Can you add padding in HTML?

When you want to add space around an HTML element's content then you'll use the padding properties. The padding shorthand property allows us to set the padding on all four sides at once instead writing out padding-top , padding-right , padding-bottom , padding-left .


1 Answers

Try

.upload-input select option { padding: 6px;}

You might have to fiddle with the .upload-input select css though.

Like:

.upload-input select {height: 35px;}
like image 189
Timbadu Avatar answered Sep 28 '22 08:09

Timbadu