1
I’m using Bootstrap in a project, but I noticed that in Firefox the combobox is not formatted. See:
Already in Chrome and Opera is perfect:
How do I fix this in Firefox? I saw on the internet that many try to customize directly in CSS and with this end up being applied in other browsers.
2
See what the Official Bootstrap 3 Documentation says https://getbootstrap.com/docs/3.3/components/#input-groups
Avoid using
<select>Elements here as they cannot be Fully Styled in Webkit browsers.
"Avoid using the element <select>, because it cannot be fully stylized in Webkit browsers"
Notice that precisely why the combobox documentation is done with an unordered list <ul> and <li> and not with the tag <select>
That’s the right way to be doing the combobox according to official documentation https://getbootstrap.com/docs/3.3/components/#dropdowns-example
<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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>OBS: I’m not talking about building the select using list is ideal, I’m just saying that is the way that Bootstrap does because it can thus better control the design of the element. Already with the tag select Bootstrap cannot fully style the element
If you want to use the inside of BS3 and still control the appearance of the element vc will have to make a custom style in the hand. Still he’s not totally crossbrowser
Take 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>Cool Hugo, I didn’t know bootstrap made select so with li’s.
@Leandro Using the unofficial example of W3school there is no way to maintain the standard. Bootstrap values keeping the default layout on all platforms, so they don’t even use select on the official components. To make this adaptation you will have to build a CSS part.
Interesting @hugocsl. I also didn’t know what Bootstrap did with lists. To be honest, front-end isn’t really my strong suit. I’m going to apply your example. Thank you.
@Fox.11 some elements are more boring to customize pq each useragent of each browser applies its default styles, as in the case of select. But I’m glad the example served you
1
The SELECT field varies according to the browser the visitor is using. You can use some methods to create a custom setting for the field.
Method with CSS "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 some of the browsers mentioned above.
Browser other questions tagged css twitter-bootstrap firefox
You are not signed in. Login or sign up in order to post.
How is the css?
– LeAndrade
Have you customized the original style of Bootstrap 3? Because this dropdown is completely different from the documentation that looks the same on all browsers... https://getbootstrap.com/docs/3.3/components/#dropdowns
– hugocsl
This is from the browser. Every browser and even every operating system has a different api. See this example in w3schools. There is certainly no problem with your css. https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_form_select&stacked=h
– Netinho Santos
Hello hugocsl. I didn’t customize. It’s... weird really.
– user24136
Hello Leandro. css is from Bootstrap itself.
– user24136
Hello Netinho. Exactly. The link you passed, in Firefox is the same way I posted.
– user24136
Cara opens the link to the official documentation I posted and look how it looks in firefox. If it continues strange I suggest you update your Firefox which should already be well outdated. What’s weird is that even in Chrome your combobox looks more like Material Design than the original Bootstrap, so something CSS is definitely influencing your inputo, or you have CDN or file. wrong css
– hugocsl
@hugocsl, sure this style is standard in all browsers?! I’m using bootstrap in Firefox Quantum on Linux Ubuntu and select is really the same as his photo, with the arrow with the gray background.
– LeAndrade
Hugo, I’m actually using Firefox Quantum 60.0.2. I believe it’s the latest version of Firefox. If you have Firefox installed, check out the link @Netinhosantos sent.
– user24136
@Leandro each user-agent of each browser stylizes the select in its particular form, as well as various other elements, such as radio button, checkbox, range, and even the window scroll. What happens is that Bootstrap DOES NOT use the select tag to dropdown, in fact they use a UL LI list to build this "component" precisely because of the difficulty of maintaining the crossbrowser style. After a look at the answer I gave below.
– hugocsl