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.
valid/invalid custom select reverts to default border color on focus
See original GitHub issueVersion: Boostrap V4.0.0-beta.2 Browser: Any OS: Any
Custom select border color, when valid or invalid, reverts back to default (non-validated) blue border color while focused, although box-shadow coloring is correct In this example I am using classes .is-invalid and .is-valid on the custom select.
And a zoomed in image to show the detail:
Issue Analytics
- State:
- Created 6 years ago
- Comments:8 (6 by maintainers)
Top Results From Across the Web
Border color not changed when field is invalid - Stack Overflow
I am fairly new to Blazor. I am trying to render custom component inside EditForm by referring this page.
Read more >Styling Form Inputs in CSS With :required, :optional, :valid and
These pseudo-classes work for input , textarea and select elements. ... input:invalid { border-color: red; } input:required:focus:valid ...
Read more >border-color - CSS: Cascading Style Sheets - MDN Web Docs
This is a box with a border around it. Each side can be set individually using border-top-color , border-right-color , border-bottom-color , ...
Read more >Form Validation Styling on Input Focus | CSS-Tricks
Only show invalid ring while not focused */ input:not(:focus):not(:placeholder-shown):invalid { border-color: var(--color-invalid); } ...
Read more >Focusing: focus/blur - The Modern JavaScript Tutorial
<style> .invalid { border-color: red; } #error { color: red } ... use Tab or click away from the <input> , then onblur...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@sabrown84 Instead of adding
!importantto the previous rule, we need to override the:focusstate’scolorfor the.custom-select. So in this snippet, instead of just thebox-shadowin that&:focus { }, addborder-color: $color;.https://github.com/twbs/bootstrap/blob/380c920f1c32681fdd0f3375b2ea3e1739fdd6a9/scss/mixins/_forms.scss#L53-L68
See this in action at https://codepen.io/emdeoh/pen/YEzpeQ.
Oh here is the pen link:
https://codepen.io/sdporter84/pen/pdzqrL