Bootstrap radio button outline on click mode

user_14229669 0
Viewed 433

i was working on my bootstrap app.

Whenever, I click on a radio button there is a blue outline like this:

enter image description here

I tried to work on this by the ff CSS:

.form-check-input:checked[type=radio], .form-check-input:checked[type=radio]:hover, .form-check-input:checked[type=radio]:focus, .form-check-input:checked[type=radio]:active{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

But still none of these works. My HTML is plain though:

<input class="form-check-input" name="gender" type="radio" value="male"> 
    <label class="form-check-label">Male </label>

Any idea how to completely remove this annoying blue outline upon clicking or selecting?

twitter-bootstrap css html
1 Answers
.form-check-input:focus {
    box-shadow: none;
}

Try this code. Hope it will work. Because when the input is focused on, the box-shadow appears.

user_155635370
Related