CODEWITHSUNDEEP
htmlcssmobile
DigitalMakers
DigitalMakers

Reputation: 15

How to remove blue background of inputs (radio, select and checkbox) on mobile devices?

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.

Upvotes: 0

Views: 3089

Answers (2)

DigitalMakers
DigitalMakers

Reputation: 15

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.

Upvotes: 1

Alias Varghese
Alias Varghese

Reputation: 2172

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;
}

Upvotes: 0

Related Questions