Why do bootstrap form select controls look a bit weird? - css

Question

The code needed is very simple as shown by w3schools:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_form_select&stacked=h
Just add a label and a class of "form-control"
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
But the result is inconsistent; some borders are black, and some are transparent. It looks weird to me. Is my sense of style just off?
Checking out bootstrap docs it looks like the correct way to do it. Is it supposed to look like that?
I tried for example to add a class and style it:
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control dropdown" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
CSS:
.dropdown {
border: transparent !important
}
No effect. What do you think?
Thanks in advance

Answer 1

You've hit a very interesting feature of the internet -- native form controls.
The border that you are encountering is the system styling of what appears to be internet explorer / edges rendering system. This can't necessarily be styled with CSS.
You could recreate the dropdown using CSS / JavaScript, but you would lose a lot of the functionality that inherently comes with that specific control.
For example, when you are on a mobile device the select / option control sometimes becomes a spin wheel / rolodex at the bottom of your view port. You also lose the keyboard / autocomplete functionality when users try to select an item via a keyboard ( I live in Minnesota, when presented with a state dropdown I type M -> selects Maine, I -> Selects (Mi)nnesota.
When developers rebuild this type of control with autocomplete functionality what tends to happen is I type M -> Maine, I -> Idaho.
Ultimately what you choose to do is up to you, but to eliminate some of the border weirdness could actually cause a user experience that is less robust than just letting it be.
As an aside most browsers implement select / option controls differently. See three different browsers below: