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演示的主要问题），在设置为“rtl”时，还要在dir属性上设置样式：< / p>

.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上运行。

Answer 2

您可以使用rtl属性的某些css：

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

这是您在jsfiddle的演示：http://jsfiddle.net/ab0xwfcs/2/

Answer 3

我不确定此方法是否支持，但您也可以使用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;
}

Demo on jsfiddle

您也可以在输入中使用此方法，而不必将其display设置为none。（这将创建一个额外的元素，将隐藏默认元素。）

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

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

3 个答案: