Javascript 更改输入样式而不显示：无

替换标准输入的常用方法是显示：无输入，然后在标签上添加背景图像

CSS:

input[type=“checkbox”]{
显示：无；
}
输入[type=“checkbox”]+标签{
背景：url（'../images/checkbox_unchecked.png'）左中心不重复；
背景尺寸：25px；
}
输入[type=“checkbox”]：选中+标签{
背景：url（'../images/checkbox_checked.png'）左中心不重复；
背景尺寸：25px；
}

问题是：HTML随后被破坏。当我想要改变元素的方向时，我必须在CSS中改变它（

background:right

）

如何更改输入字段的图像/样式而不首先使其显示：无，然后更改背景图像？它必须在安卓2.3中工作

---

编辑：。

解决

rtl

问题的简单方法（假设这是这里的主要问题，基于您的JSFIDLE演示），就是在设置为“rtl”时，也在

dir

属性上设置样式：

.styles[dir=“rtl”]输入[type=“radio”]+标签{
背景位置：右侧；/*将背景位置设置为右侧*/
左填充：0；/*重置标签上的左填充*/
正确填充：35px；/*给标签一些正确的填充*/
}

---

---

我上面使用的所有东西都应该在安卓2.3上工作。

您可以使用一些作用于

rtl

属性的css：

.styles[dir="rtl"] input[type="radio"]+label {
   padding: 0 35px 0 0;
   background-position: right center;
}

---

这是您在JSFIDLE上的演示：

我不确定是否支持此方法，但您也可以使用CSS

：before

而不是为每个方向设置背景位置

.styles input[type="radio"] {
  display: none;
}
.styles input[type="radio"]+label:before {
    content:"";
    display:inline-block;
    width:25px;
    height:25px;
    background:red;
}
.styles input[type="radio"]:checked+label:before {
    content:"";
    display:inline-block;
    width:25px;
    height:25px;
    background:pink;
}

---

您也可以对输入本身使用此方法，而无需将其

显示设置为
none
。
（这将创建一个额外的元素，该元素将在下面隐藏默认元素。）

你对你要做的事情有一点了解吗？我添加了一个JSFIDLE。你指定它需要在较旧的浏览器中工作-有多旧？你需要双向吗？@Don Android 2.3 stock。是的。我想添加一个简单的rtl来改变方向。
input[type="radio"]:after {
    content:"";
    display:inline-block;
    width:25px;
    height:25px;
    background:gray;
}
input[type="radio"]:checked:after {
    content:"";
    display:inline-block;
    width:25px;
    height:25px;
    background:pink;
    position:relative;
}