Different Output of my Selectbox On Browsers

Question

I have used selectbox with basic style. Though on different browsers like safari and mozilla its looks different.

Here is my CSS:

.select { 
padding:7px; 
min-height:30px; 
background:#CCC;
border: 1px solid #7f7f7f;
border-radius: 4px;   
font-size: 13px; 
}

Here is the html

<select class="select">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

Is there any way show select box unique. I don't want to use custom jquery selectbox

What looks different? Each browser has its own way of rendering HTML elements. You can't really control that with CSS.. — putvande, Jul 16 '14 at 10:27
@putvande I guess OP concern select should have same looks across all browsers. — Kheema Pandey, Jul 16 '14 at 10:28
@error404, only one solution is use a image on select, that is only a CSS solution.. check this SO link. http://stackoverflow.com/questions/21159894/selectbox-dropdown-styling?rq=1 — Kheema Pandey, Jul 16 '14 at 10:29

score 0 · Accepted Answer · answered Jul 16 '14 at 10:32

I think you have used min-height unnecessarily. Remove it and check your code again.

.select { 
padding:7px; 
background:#CCC;
border: 1px solid #7f7f7f;
border-radius: 4px;   
font-size: 13px; 
}

You can increase or decrease the padding as per your required height.

James Martin-Davies · Answer 2 · 2014-07-16T10:38:47.197

0

First search result in Google returned:

The idea is to wrap the select in an element, then reset as much of the styling as possible. All browsers display <select> differently.

edited Jul 16 '14 at 10:38

answered Jul 16 '14 at 10:32

2 Answers2