javascript - 无显示改变输入方式 :none

Question

替换标准输入的常用方法是display:none输入，然后在标签中添加background-image。

CSS:

input[type="checkbox"] {
  display: none;
}
input[type="checkbox"]+label {
  background: url('../images/checkbox_unchecked.png') left center no-repeat;
  background-size: 25px;
}
input[type="checkbox"]:checked+label {
  background: url('../images/checkbox_checked.png') left center no-repeat;
  background-size: 25px;
}

问题:之后 HTML 被破坏了。当我想改变元素的方向时，我必须在 CSS 中改变它(background: right)。

如何更改输入字段的图像/样式而不先将其设置为display:none，然后再更改背景图像？它必须在 Android 2.3 中工作。

编辑:JSFiddle .

Answer 1

rtl 问题的简单解决方法(假设这是这里的主要问题，基于您的 JSFiddle 演示)，也是在设置时对 dir 属性设置样式到“rtl”:

.styles[dir="rtl"] input[type="radio"]+label {
    background-position: right;        /* Set the background position to the right. */
    padding-left: 0;                   /* Reset the left padding on the label. */
    padding-right: 35px;               /* Give the label some right padding. */
}

JSFiddle demo .

---

根据 Can I Use...，我上面使用的所有内容都应该在 Android 2.3 上运行.