0

I tried to remove the focus background when the user clicks on the input (radio, checkbox or select) but it not works. These are the styles that I put on the element:

    .form-holder input[type="radio"]:focus, .form-holder input[type="checkbox"]:focus {
     background: transparent;
     box-shadow: none;
     outline: 0!important;
     outline: none!important;
     -webkit-tap-highlight-color: transparent!important;
    }

Test image

JSFiddle

Any suggestions? Thanks.

DigitalMakers
  • 15
  • 1
  • 5
  • have you tried with outline-width: 0, as suggested here? https://stackoverflow.com/questions/1457849/how-to-remove-the-border-highlight-on-an-input-text-element – sissy Oct 10 '17 at 08:47
  • is this code inside the media query? – Shadow Fiend Oct 10 '17 at 08:49
  • Hi sissy, thanks for your answer. I tried to add it to, but still not working. The blue background stills showing. – DigitalMakers Oct 10 '17 at 08:53
  • Hi ShadowFiend. Yes, it is inside in @media (max-width: 767px) query, but not working. – DigitalMakers Oct 10 '17 at 08:54
  • Hi, I found the solution. Because the input is inside the label is necessary to put those styles on the label, because the label is doing that interaction. Thanks for all. – DigitalMakers Oct 10 '17 at 10:02

2 Answers2

1

I found the solution. Because the input is inside the label is necessary to put those styles on the label, because the label is doing that interaction. Thanks for all.

DigitalMakers
  • 15
  • 1
  • 5
0

Hope this helps!

.form-holder input[type="radio"]:focus, .form-holder input[type="checkbox"]:focus {
     background: transparent;
     box-shadow: none;
outline: none;
  outline-width: 0;
-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}
Alias Varghese
  • 2,104
  • 3
  • 24
  • 52