使用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隱藏複選框文本

回答

相關問題