使用CSS / Javascript隐藏复选框文本

Question

我有一个gridview，第一列有一个复选框来选择每一行。我已为复选框编写了一些CSS，但由于复选框中没有任何文本，因此不会显示任何内容。如果我在复选框中包含任何文本，那么CSS工作正常。

我不需要文字或隐藏文字（如果需要假人），以使整个外观和感觉相同。

这是我的CSS：

input[type="checkbox"] {
    position:absolute;
    opacity: 0;
    -moz-opacity: 0;
    -webkit-opacity: 0;
    -o-opacity: 0;
}
input[type="checkbox"] + label {
    position:relative;
    padding: 3px 0 0 25px;
}
input[type="checkbox"] + label:before {
    content:"";
    display:block;
    position:absolute;
    top:2px;
    height: 12px;
    width: 12px;
    background: white;
    border: 1px solid gray;
    box-shadow: inset 0px 0px 0px 2px white;
    -webkit-box-shadow: inset 0px 0px 0px 2px white;
    -moz-box-shadow: inset 0px 0px 0px 2px white;
    -o-box-shadow: inset 0px 0px 0px 2px white;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
}
input[type="checkbox"]:checked + label:before {
    background: #88bbd4;
}

我需要网格列，如下图所示：

Answer 1

您的CSS只是与您所追求的内容不同步。你不需要所有的东西。为什么border-radius？你想让它们看起来像单选按钮吗？

你能做的就是：

演示：http://jsfiddle.net/abhitalks/ZdyC7/

CSS ：

input[type="checkbox"]::after {
    content: '';
    display: inline-block;
    width: 16px; height: 16px;
    background-color: white;
    border: 1px solid gray;
    box-shadow: inset 0px 0px 0px 2px white;
    -webkit-box-shadow: inset 0px 0px 0px 2px white;
    -moz-box-shadow: inset 0px 0px 0px 2px white;
    -o-box-shadow: inset 0px 0px 0px 2px white;
}
input[type="checkbox"]:checked::after {
    background-color: red;
}