1

我正在尝试通过将背景图像添加到 css 样式来制作自己的复选框：

.x-input-el + .x-field-mask {
    background-image:url(../images/checkbox-inactive.png);
}

和

.x-input-el:checked + .x-field-mask::after {
    background-image:url(../images/checkbox-active.png);
}

一切都很顺利，但我无法删除原生蓝色复选框（尽管我能够更改它的颜色）。删除复选框的正确方法是什么？

一旦我在此处创建 font-size:0 或覆盖 app.css 中的某些内容：

.x-checkmark-base, .x-field-checkbox .x-field-mask::after, .x-field-radio .x-field-mask::after, .x-select-overlay .x-item-selected.x-list-item::after {
position: absolute;
top: 0;
right: 10px;
bottom: 0;
content: '3';
font-family: 'Pictos';
font-size: 1.6em;
text-align: right;
line-height: 1.6em;
}

，我无法选中复选框（选中后它似乎没有激活）。如何解决这个问题？我应该怎么做才能从屏幕上隐藏复选框并保留所有其余部分？谢谢你。

4

2 回答 2

1

Gcyrillus，这是解决方案。

.x-checkmark-base, .x-field-checkbox .x-field-mask::after, .x-field-radio .x-field-mask::after, .x-select-overlay .x-item-selected.x-list-item::after {
    content:''
}

（有些课程可能会被取消）谢谢！

于 2013-06-10T11:25:41.140 回答
1

如果你使用复选框+标签，你可以隐藏复选框和样式标签。
位置：固定+左：远；可能会这样做。

做个测试：http ://codepen.io/gcyrillus/pen/BFIno 

label {
  display:inline-block;
  color:tomato
}
label:before {
  content:'✗';
  border:solid;
  border-radius:3px;
  padding: 0 0.15em;
}
input:checked + label {
  color:turquoise;
}
input:checked + label:before {
  content:'✓';
}
/* hide hecbox */
[type="checkbox"] {
  position:fixed;
  left:-9999px;
}

<p>
  <input type="checkbox" id="ckckbx"/>
  <label for ="ckckbx"> lorem</label>
</p>

label 或 pseudo 可以保存您的背景图像。

于 2013-06-10T10:38:03.763 回答