Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Form validation invalid icon on select only half visible

See original GitHub issue

Operating system and version: Windows 10
Browser and version: Latest firefox
A reduced test case: https://codepen.io/hrueger/pen/bGEYxxJ

The icon which is added to form-control elements with the class is-invalid, looks like this on select fields: grafik

See https://codepen.io/hrueger/pen/bGEYxxJ

Issue Analytics

State:
Created 3 years ago
Reactions:3
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

XhmikosRcommented, Mar 11, 2021

This should be fixed by #33206

0reactions

mdocommented, Jan 13, 2021

This doesn’t apply to v5 I believe because of our .form-select being a completely custom component, so removing that label. Still tbd on if we can fix this reliably for v4 though given the differences in rendering between browsers for the .form-select there (but not .custom-select).

Top Results From Across the Web

Bootstrap formvalidation fallback with .is-invalid and .is-v

Just the "valid-feedback" and "invalid-feedback" divs are displayed, but the icon and the colored border are missing. First I thought that this is...

How to remove space when the error for form validation doesn ...

I've made form validation for email using react and tailwindcss. However, even when there's no error message, there's a space for it, ...

Validation · Bootstrap v5.2

HTML form validation is applied via CSS's two pseudo-classes, :invalid and :valid . It applies to <input> , <select> , and <textarea> elements....

Validating Input | Web Accessibility Initiative (WAI) - W3C

Custom validation needs to notify users in an accessible way as described in the User Notifications part of this tutorial. Client-side validation alone...

Working with Angular 4 Forms: Nesting and Input Validation

Validating user inputs is an essential part of any robust web application. Angular 4 makes it especially easy for both template-driven and reactive...