How to remove the blue color box in inputs and button in bootstrap if its clicked

Question

I want to remove the blue color box thing if the form, inputs, select, textarea, button is clicked.

My problem is the blue box color thing is still appear and its annoys me :(.

Is this blue box thing removable by using jquery?

testing link: http://jsfiddle.net/5kcsn/309/

css:

input,
input:focus,
input:active,
input:hover
{
  border-color: #ccc;  
  box-shadow:  #ccc;
 border: 1px solid #ccc;
 outline:none;
}

script:

$("input, select, textarea, form, button").css("outline", "none");
$("input, select, textarea, form, button").css("box-shadow", "none");

Took 5 seconds to google this. http://stackoverflow.com/a/3397158/2068709 — pattmorter, Jul 28 '14 at 17:29
@pattmorter - That's the native outline, Bootstrap uses borders and shadows, so it won't work there — adeneo, Jul 28 '14 at 17:30
@adeneo soooo take whats there and add shadows and stuff to it? Its not rocket science. — pattmorter, Jul 28 '14 at 17:31
@pattmorter - There's a fiddle attached, figure out what styles to apply to remove the blue hue, and post it as an answer then. — adeneo, Jul 28 '14 at 17:32

score 1 · Accepted Answer · answered Jul 28 '14 at 17:58

Bootstrap use a specific class on form element. Since all its styling is based on that class, you can't override it with a tag selector. So instead of :

input:focus
{
  border-color: #ccc;  
  box-shadow:  #ccc;
  border: 1px solid #ccc;
  outline:none;
}

Use the bootstrap class :

.form-control:focus
{
  border-color: #ccc;  
  box-shadow:  #ccc;
  border: 1px solid #ccc;
  outline:none;
}

How to remove the blue color box in inputs and button in bootstrap if its clicked

1 Answers1