Bootstrap: Chrome doesn't honor border-radius on <select>s
This is related to this StackOverflow post at http://stackoverflow.com/questions/5780109/removing-rounded-corners-from-a-select-element-in-chrome-webkit.
Basically if you have the following HTML:
<div class="input-group">
<select class="form-control input-sm">
<option value="4242" selected="">Visa ending in 4242 (12/2015)</option>
</select>
<div class="input-group-btn">
<button type="button" data-toggle="modal" data-target="#cards-modal" class="btn btn-primary btn-sm card-manage-btn">Manage</button>
</div>
</div>
Chrome will render the
A possible fix would be something like this:
<select class="form-control input-sm" style="border: 0; outline: 1px inset #cccccc; outline-offset:-1px;">
<option value="4242" selected="">Visa ending in 4242 (12/2015)</option>
</select>
Which renders the select as follows:
niftylettuce
All 9 comments
Just documenting this here, most likely this issue will be closed as it's Chrome only.
niftylettuce
on 16 Jan 2015
Approximate duplicate of #15340.
Yeah, this is already documented: https://github.com/twbs/bootstrap/blob/b7c332f183d52c6b1432a4eb511b8c61478bfc81/docs/_includes/css/forms.html#L409
And we also specifically recommend against <select>s in .input-groups: https://github.com/twbs/bootstrap/blob/b7c332f183d52c6b1432a4eb511b8c61478bfc81/docs/_includes/components/input-groups.html#L8
I'll leave it to @mdo to evaluate whether your hack is worth pursuing.
cvrebert
on 16 Jan 2015
@cvrebert thank you :+1:
niftylettuce
on 16 Jan 2015
Nah, we'll pass on the hack for that. Not worth our time to get into even more form inconsistencies.
mdo
on 16 Jan 2015
@mdo @cvrebert does anyone know if there is a WebKit, Safari, or CRBug for this filed somewhere? It'd be so nice if they patched WebKit to support border-radius customization on <select>'s...
niftylettuce
on 22 Jan 2015
No, I haven't gone looking for one because it's more of an RFE than a bug per se. CSS/HTML currently deliberately leaves a lot of stuff around styling <select>s undefined.
cvrebert
on 22 Jan 2015
http://stackoverflow.com/a/5780261
select {
appearance: none;
}
edit:
also takes away the arrows for the select
lucasgranberg
on 6 Aug 2015
Isn't it.
select {
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
According to the link you've referenced?
nathanayling
on 6 Aug 2015
yeah but it doesn't work anyway becouse of the disappearing arrows. In my case I tested with only appearence but the -webkit- part was added by grunt. In any case it doesn't work becouse of the disappearing arrows. For reference I just went with ui-select for my application, select2 is another option.
lucasgranberg
on 6 Aug 2015
Related issues
sts-ryan-holton
路
37Comments
matthiku
路
134Comments
juampi
路
49Comments
lpilorz
路
43Comments
mdo
路
66Comments
Most helpful comment
Isn't it.
select { -webkit-appearance: none; -webkit-border-radius: 0px; }According to the link you've referenced?