twitter/bootstrap — Issue #2390: This is how you fix the select issue in firefox.
Author: athomann
Created: 2012-03-03 17:35:33+00:00
State: open

Many have noticed the issue with the select button looking weird in firefox. This is how you fix it. SImply remove the select features from the css and put them in this query. This will allow only webkit browsers to see this code and firefox will go back to regular looking select.

@media screen and (-webkit-min-device-pixel-ratio:0) {
select {
display: inline-block;
width: 210px;
height: 18px;
padding: 4px;
margin-bottom: 9px;
font-size: 13px;
line-height: 18px;
color: #555555;
border: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
select {
height: 28px;
/* In IE7, the height of the select element cannot be changed by height, only font-size */
*margin-top: 4px;
/* For IE7, add top margin to align select with labels */
line-height: 11px;
}
select {
width: 220px;
background-color: #ffffff;
}
select[multiple], select[size] {
height: auto;
}
}