Border color on default input style

Question

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

User · Accepted Answer

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

User · Answer

If I understand your question correctly this should solve it   http   jsfiddle net wvk2mnsf   HTML - create a simple input field    lt input type  text  id  giraffe    gt    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

User · Answer

border-color  transparent  border  1px solid red

User · Answer

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

User · Answer

You can use jquery for this by utilizing addClass   method  CSS      defaultInput            width  100px       height 25px       padding  5px          error    border 1px solid red      lt input type  text  class  defaultInput   gt    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

User · Answer

If it is an Angular application you can simply do this  input ng-invalid ng-touched       border  1px solid red  important

[css] Border color on default input style

Examples related to css

Examples related to input

Examples related to border