Level 27
/needmoreinfo
Is the red border by the browser? firefox? do you know what is the CSS for the red border?
input:required {
box-shadow:none;
}
input:invalid {
box-shadow:0 0 3px red;
}
Or some Javascript package?
Sep 27, 2020
7
Level 6
Is there a way to remove border when the submitted input is invalid?
<form action="#">
<input type="text" name="text" required>
<button type="submit">Submit</button>
</form>
When the empty input has been submitted, it shows a red border around the textbox. Is there a way to remove styling?
Level 6
I didn't used any styling in the form. The border has been rendered by the browser. I'm using firefox. I tried your styling but it didn't worked.
Level 102
input:invalid {
box-shadow:none;
border:0;
outline:none;
}
Or add your own
Level 6
@sinnbeck I noticed that the style was shown already even though the form haven't submitted yet.
Level 102
https://jsfiddle.net/eodpLu2q/
You can test it out here. I removed all borders, and set my own :)
Level 6
The input is automatically styled though. I want the style to only show if the input was submitted and it was empty. I tried using it with :valid and :empty but the style overrides the other.
Level 102
Then you need use javascript. Css does not check if the form is submitted. The closest you can get is something like
input {
box-shadow:none;
border: 0;
outline:none;
}
input:focus:invalid {
box-shadow:none;
border: 2px solid red !important;
outline:none;
}
Please or to participate in this conversation.