1

I have a form like: http://jsfiddle.net/bppe3nsb/

And when we click on the send button, I do not want any change on field which are not filled. No red border. No shadow. The popup message is enough:

enter image description here

Chrome is working fine, I don't have any red border but Edge and Firefox display big red borders like this after clicking on Send button if all fields required are not filled:

enter image description here

So I tried to overwrite the .has-error class like this but with no success:

.has-error input[type=text], 
.has-error input[type=email], 
.has-error textarea {
    border: 1px solid rgba(0,0,0,.1);
}

Why it doesn't work ? All examples I have seen where speaking about .has-error.

The solution for Firefox does not work for Edge http://jsfiddle.net/jd46q3vg/.

input:required {
    box-shadow:none;
}
input:invalid {
    box-shadow:none;
}
textarea:required {
    box-shadow:none;
}
textarea:invalid {
    box-shadow:none;
}
London Smith
  • 1,622
  • 2
  • 18
  • 39
  • The red borders have nothing to do with bootstrap. Firefox adds them simply because the field is `required`. (You can check this is true by removing bootstrap entirely; you will see that the red borders still appear). See [here](http://stackoverflow.com/questions/5939341/firefox-4-is-there-a-way-to-remove-the-red-border-in-a-required-form-input) and [here](http://stackoverflow.com/questions/3809146/firefox-4-required-input-form-red-border-outline?noredirect=1&lq=1). – abl Feb 12 '17 at 13:40
  • Possible duplicate of [Firefox 4 Required input form RED border/outline](http://stackoverflow.com/questions/3809146/firefox-4-required-input-form-red-border-outline) – abl Feb 12 '17 at 13:44
  • Yes, but not working with Edge. How to remove it for Edge too ? http://jsfiddle.net/jd46q3vg/ – London Smith Feb 12 '17 at 13:48

1 Answers1

1

Please Provide

box-shadow: none; outline:none;

for that input box will solve the problem in IE/EDGE/Firefox

gokul raghu
  • 36
  • 4