I'm using Bootstrap in a project, but I noticed that in Firefox the combobox goes unformatted. See:
ChromeandOperalookperfect:
How do I fix this in Firefox? I saw on the internet that many try to customize directly in CSS and with that ends up being applied in other browsers.
See what the Bootstrap Official Documentation says link
Avoid using
<select>elements here as they can not be fully styled in WebKit browsers.
"Avoid using the <select> element because it can not be fully stylized in webkit browsers"
Notice that this is why the combobox of the documentation is done with an unordered list <ul> and <li> and not tag <select>
This is the correct way to do the combobox according to the official documentation link
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> OBS: I'm not saying that building select using list is ideal, I'm just saying it's the way Bootstrap does because it manages to better control the design of the element. Already with the tag select Bootstrap can not fully stylize the element
If you want to use the inside BS3 and still control the appearance of the element you will have to do a custom style in the hand. Even though it is not fully crossbrowser
See an example:
@-moz-document url-prefix() {
select.form-control {
padding-right: 25px;
background-image: url("data:image/svg+xml,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='14px' height='14px' viewBox='0 0 1200 1000' fill='rgb(51,51,51)'> <path d='M1100 411l-198 -199l-353 353l-353 -353l-197 199l551 551z'/> </svg>");
background-repeat: no-repeat;
background-position: calc(100% - 7px) 50%;
-moz-appearance: none;
appearance: none;
}
}<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
<br>
<form class="form-horizontal">
<div class="form-group">
<label for="test" class="col-sm-2 control-label">
Test
</label>
<div class="col-sm-10">
<select id="test" class="form-control">
<option>(select)</option>
<option>(select)</option>
<option>(select)</option>
<option>(select)</option>
</select>
</div>
</div>
</form>
</div>The SELECT field varies depending on the browser the visitor is using. You can use some methods to create a custom configuration for the field.
CSS method "appearance" Considered the most "correct" method for using only css directly in the SELECT field, its biggest problem is that it is supported by only a few browsers (Chrome, Firefox and Safari), having no effect on other browsers.
Note: Then go to the page with any of the browsers mentioned above.