Validation icons become too small when used on .custom-select

[reefdog]

When using the .has-danger/.form-control-danger classes on a .c-select custom menu, the .c-select's background-size overrides the .form-control-danger's, making the validation icons really tiny.

JSFiddle: https://jsfiddle.net/rjp4ys24/2/

Screenshot ("Name" is a text input and looks correct; "Country" is the custom select menu):

[RyanZim]

.c-select has been renamed to .custom-select since v4-alpha.2. Other than that, the bug is still reproducible with the latest v4-dev branch. Updated JSFiddle: https://jsfiddle.net/g0wLj91z/.

I might also add that UI for <select class="custom-select form-control form-control-danger"> is not very intuitive without the arrows IMHO.

[wolfy1339]

I think a good alternative would be to place the icon beside the select

[p34eu]

@RyanZim , i agree with you on the arrows. As far for the bg, it's that small because it is in pixels.
- $custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
+ $custom-select-bg-size: ($input-height / 2) ($input-height / 2);
Perhaps with red triangle down instead of red cross.

[RyanZim]

@p34eu I tend to favor @wolfy1339's suggestion if that's reasonably possible.

[cvrebert]

I don't think <select>s were considered when the validation states were being written. The fact that they currently kinda work on <select>s at all is likely a happy accident. Might be tricky to get the icons to align properly (taking into account the menu triangle(s)) across browsers.
@mdo Do you want to accept this as a valid bug, or deem validation-states-on-<select>s as not supported?

[mdo]

Unsure yet. Only reason it's fucky there is the conflicting background image sources. It'd be a bit of a pain (duplicate code) to override and do the multiple background fix to preserve the validation icon and the select arrow.

[cristian-sima]

Same here for warning

[bastienmoulia]

I think the validation icon in the actual way is a bad thing. Depending of the browser the display is ugly for the select with the icon and for other input with new type like number because the icons on the right are on top of each other.

I did some test to make it better, but change the margin-right of the icon depending of the browser is a mess.

Exemple

So I see 2 possibilities to improve it:

• Remove the validation icon as a class of form-controland add it in an input-group-addon. To prevent overlaying the icon and the field.
• Make the custom-select the default class of a select with form-control. To have a consistant design across browsers.

[tx8821]

I've patched this very ugly bug in my project with:

// Fix bug with .custom-select that results in tiny validation images:
.has-danger .custom-select.form-control-danger, .has-success .custom-select.form-control-success, .has-warning .custom-select.form-control-warning {
    background-size: 1.25rem 1.25rem
}

[stroebjo]

I used multiple-backgrounds to add the validation icons, as well as the custom-select indicator.

.has-success .custom-select.form-control-success,
.has-warning .custom-select.form-control-warning,
.has-danger .custom-select.form-control-danger {
	background: $custom-select-bg no-repeat;
	background-image: $custom-select-indicator, $form-icon-success;
	background-size: $custom-select-bg-size, ($input-height / 2) ($input-height / 2);
	background-position: right $custom-select-padding-x center, center right ($input-height / 4) + $custom-select-padding-x + $input-btn-padding-x;
	padding-right: $custom-select-padding-x + ($input-btn-padding-x * 3) + $input-btn-padding-x;
}

.has-warning .custom-select.form-control-warning {
	background-image: $custom-select-indicator, $form-icon-warning;
}

.has-danger .custom-select.form-control-danger {
	background-image: $custom-select-indicator, $form-icon-danger;
}

See fiddle: https://jsfiddle.net/data/ar3j08wa/6/

[mdo]

Closing for #22762.