How to change border color of textarea on focus

Question

Forgive me is this is a stupid question  but i need help  I want to change border color of TEXTAREA on focus  but my code doesn t seem to working properly   Kindly view code on fiddle    lt form name    myform  method    post  action  insert php   onsubmit  return validateform    style  width 40   gt           lt input type  text  placeholder  Enter Name   name  name  maxlength  300  class  input  gt           lt input type  email  placeholder  Enter E-mail   name  address  maxlength  300  class  input  gt           lt textarea placeholder  Enter Message   name  descrip  class  input   gt  lt  textarea gt       lt br gt   lt input class  button secondary  type submit name  submit  value  Submit   gt   lt  form gt    Here is the CSS   input   border 0   padding 10px   font-size 1 3em   font-family  Ubuntu Light   Ubuntu   Ubuntu Mono   Segoe Print   Segoe UI   color  ccc   border solid 1px  ccc   margin 0 0 20px   width 300px  -moz-box-shadow  inset 0 0 4px rgba 0 0 0 0 2    -webkit-box-shadow  inset 0 0 4px rgba 0  0  0  0 2    box-shadow  inner 0 0 4px rgba 0  0  0  0 2   -webkit-border-radius  3px   -moz-border-radius  3px   border-radius  3px     input focus        outline  none  important      border-color   719ECE      box-shadow  0 0 10px  719ECE

User · Answer

You can use CSS s pseudo-class to do that  A pseudo-class is used to define a special state of an element  there is a   focus pseudo-class that is used to select the element that has focus  So you can hook it in your CSS like this Using class  x000D   x000D   my-input  focus     outline-color  green    x000D   x000D   x000D   Using Id  x000D   x000D   my-input  focus     outline-color  red    x000D   x000D   x000D   Directly selecting element  x000D   x000D  input  focus     outline-color  blue    x000D   x000D   x000D   Using attribute selector  x000D   x000D  input type  text    focus     outline-color  orange    x000D   x000D   x000D

User · Answer

so simple     outline-color   blue  important    the whole CSS for my react-boostrap button is     custom-btn       font-size 1 9em      background   2f5bff      border  2px solid  78e4ff      border-radius  3px      padding  50px 70px      outline-color   blue  important      text-transform  uppercase      user-select  auto      -moz-box-shadow  inset 0 0 4px rgba 0 0 0 0 2       -webkit-box-shadow  inset 0 0 4px rgba 0  0  0  0 2       -webkit-border-radius  3px      -moz-border-radius  3px

User · Answer

Try out this probably it will work input  outline-color   fff   your color outline-style  none    it depend on you

User · Answer

Probably a more appropriate way of changing outline color is using the outline-color CSS rule    textarea     outline-color   719ECE      or for input  input     outline-color   719ECE      box-shadow isn t quite the same thing and it may look different than the outline  especially if you apply custom styling to your element

User · Answer

There is an input focus as there is a textarea focus  input focus        outline  none  important      border-color   719ECE      box-shadow  0 0 10px  719ECE    textarea focus        outline  none  important      border-color   719ECE      box-shadow  0 0 10px  719ECE

User · Answer

input focus       outline  none  important      border 1px solid red      box-shadow  0 0 10px  719ECE

User · Answer

you need just in scss varible   input-btn-focus-width         05rem  default

[html] How to change border color of textarea on :focus

Examples related to html

Examples related to css