如何在移动设备上删除输入(收音机，选择和复选框)的蓝色背景

Question

当用户单击输入（单选、复选框或选择）时，我试图删除焦点背景，但它不起作用。这些是我放在元素上的样式：

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

测试图像

JSFiddle

有什么建议吗？谢谢。

Answer 1

我找到了解决方案。因为输入在标签内，所以需要将这些样式放在标签上，因为标签正在执行这种交互。谢谢大家。

Answer 2

希望这有帮助！

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