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

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

我不需要文本或隐藏文本（如果需要虚拟文件），使外观和感觉始终如一。

这是我的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; 
}

我需要像这里显示的图像网格列： enter image description here

来源

2014-06-25 Tapas Mahata

你可以做一个http://jsfiddle.net？ – webkit

只需在第一个模板字段的项目模板中添加一个复选框。你不需要任何文本来显示它 –

@VikasRana：是的，我已经添加了，但是如果我不向它添加任何文本，css不会被应用。 –

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

来源

2014-06-25 11:39:59 Abhitalks

除了IE9，这看起来很漂亮，但我需要在IE9中使用相同的外观。 –

它在IE中优雅地降级。 – Abhitalks

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

回答

相关问题