How come I can t remove the blue textarea border in Twitter Bootstrap

Question

In Chrome  there is a blue border around the textarea   How come I can t remove it   textarea hover  input hover  textarea active  input active  textarea focus  input focus           outline 0px  important

User · Answer

This is what worked for me   All the other solutions didn t quite work for me  but I understood one thing from the other solutions and its that default styles of textarea and label in combination is responsible for the blue border    textarea  label       outline 0px  important       -webkit-box-shadow  none  important      EDIT  I had this issue with Ant Design textarea  Thats why this solution worked for me  So  if you are using Ant  then use this

User · Answer

For future reference you can work out computed styles via an inspector

User · Answer

textarea hover  input hover  textarea active  input active  textarea focus  input focus       outline  0px  important      border  none important       use border none  instead of outline because the focus line is a border not a outline

User · Answer

This worked for me  input type text  focus outline  none     i m using bootstrap 3

User · Answer

Solved using this  Works fine on bootstrap 3 x and 4 0          outline 0px  important      -webkit-appearance none      With this code  you re going to remove outline from all tags and classes

User · Answer

Try this change border-color to anything which you want    form-control focus     border-color   666666    -webkit-box-shadow  none    box-shadow  none

User · Answer

BOOTSTRAP 4  If you do not want to kill a fly with bazooka by use -webkit-appearance none  which also kills nice sliderinputs btw and presuming you are working with the bootstrap form css selector  form-control  for your input   This is the solution    form-control focus       box-shadow  none important      border-color   ced4da important      If you want to keep a tiny small blue outline the leave border-color out

User · Answer

For anyone still searching  It s neither border or box-shadow  It s actually  quot outline quot   So just set outline  none  to disable it

User · Answer

try this  I think this will help and your blue border will be removed   outline none

User · Answer

If you are someone  who still face this issue   Here is the answer  thanks god    radio-custom input type radio  focus label  before       background-image  none  important      outline  none  important      -webkit-box-shadow  none  important      box-shadow  none  important      You are wondering why others solution doesn t works for you   Because the style wasn t actually applied to radio button   Add this style you will find your answer  input type  text         margin-left  10px      label  before thats where you have to apply your style

User · Answer

was-validated  form-control valid   was-validated  form-control invalid       background-image  none           box-shadow  none     was-validated  form-control invalid focus   was-validated  form-control valid        box-shadow  none     form-control focus       outline  none      box-shadow  none

User · Answer

You have write -webkit-appearance none  like this   textarea hover   input hover   textarea active   input active   textarea focus   input focus  button focus  button active  button hover  label focus   btn active   btn active       outline 0px  important      -webkit-appearance none      box-shadow  none  important

User · Answer

This works 100    textarea focus  input type  text   focus textarea type  text   focus    input type  password   focus  input type  datetime   focus  input type  datetime-local   focus  input type  date   focus  input type  month   focus  input type  time   focus  input type  week   focus  input type  number   focus  input type  email   focus  input type  url   focus  input type  search   focus  input type  tel   focus   input type  color   focus   uneditable-input focus   form-control focus     border-color   your color  or none  box-shadow  your color  or none  outline   your color  or none

User · Answer

Use outline  transparent  in order to make the outline appear like it isn t there but still provide accessibility to your forms  outline  none  will negatively impact accessibility    Source  http   outlinenone com

User · Answer

Your best bet is to right click   inspect the element   I am using Bootstrap 4 and none of the suggestions worked until I did this   Once I found where the relevant code was in the inspect window  I copied and pasted the relevant code that was causing the  focus to be outlined blue and changed it accordingly   This is the code that worked in my css   btn focus   btn focus   outline  0  box-shadow  0 0 0 0

User · Answer

Bootstrap 3  If you just want to change the color  change the variable  recommended     Less or Customizer   input-border-focus  red    variables less  Sass   input-border-focus  red    variables sass  If you wan t to remove it completely  you ll have to overwrite the Mixin that sets the outline    form-control-focus  color   input-border-focus       CSS  If you are using css overwrite it via    form-control focus      border-color   cccccc      -webkit-box-shadow  none      box-shadow  none      Link to implementation

User · Answer

I believe that s a shadow  Try this    box-shadow none     Or if you re not using LESS   box-shadow  none  -moz-box-shadow  none  -webkit-box-shadow  none

User · Answer

This worked for me   form-control   box-shadow  none important

User · Answer

Bootstrap 4 0    focus       box-shadow  none  important      border  solid 1px red  any color    important      visual example

[html] How come I can't remove the blue textarea border in Twitter Bootstrap?

Examples related to html

Examples related to css