'Border color on default input style

here's a tricky question...

I have default styled input fields (no css added, just width/height/padding), but now I want to give it a red border (error style). How can I do this? Just setting border will delete the default style of the input, setting only border-color will look weird, setting an outline will work in some cases (and doesn't look so good in Firefox).

Any tips?

EDIT: Come on guys read the question before answering. I want the browser default look of the input, I just want to give it a red border.

cssinputborder


Solution 1:[1]

I would have thought this would have been answered already - but surely what you want is this: box-shadow: 0 0 3px #CC0000;

Example: http://jsfiddle.net/vmzLW/

Solution 2:[2]

You can use jquery for this by utilizing addClass() method

CSS 

 .defaultInput
    {
     width: 100px;
     height:25px;
     padding: 5px;
    }

.error
{
 border:1px solid red;
}

<input type="text" class="defaultInput"/>

Jquery Code

$(document).ready({
  $('.defaultInput').focus(function(){
       $(this).addClass('error');
  });
});

Update: You can remove that error class using 

$('.defaultInput').removeClass('error');

It won't remove that default style. It will remove .error class only

Solution 3:[3]

whats actually wrong with:

input { border: 1px solid #f00; }

do you only want it on inputs with errors? in that case give the input a class of error...

input.error { border: 1px solid #f00; }

Solution 4:[4]

If it is an Angular application you can simply do this

input.ng-invalid.ng-touched
{
    border: 1px solid red !important; 
}

Solution 5:[5]

If I understand your question correctly this should solve it:

http://jsfiddle.net/wvk2mnsf/

HTML - create a simple input field.

<input type="text" id="giraffe" />

CSS - clear out the native outline so you can set your own and it doesn't look weird with a bluey red outline.

input:focus {
    outline: none;
}
.error-input-border {
    border: 1px solid #FF0000;
}

JS - on typing in the field set red border class declared in the CSS

document.getElementById('giraffe').oninput = function() { this.classList.add('error-input-border'); }

This has a lot of information on the latest standards too: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation

Solution 6:[6]

border-color: transparent; border: 1px solid red;

Solution 7:[7]

    border: 1px solid #ccc;

Fix this setting in a class and apply it to your imput.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 mattbee
Solution 2
Solution 3 Ian Wood
Solution 4 Dilshan Liyanage
Solution 5
Solution 6 Alexandre Vieira
Solution 7 Edson Luiz dos Santos Junior

Related Questions