将内容添加到复选框

我的复选框上有以下CSS工作。如何添加内容属性以在其上显示文本。将内容添加到复选框

.checkBox .x-form-checkbox { 
    height: 25px; 
    width:75px; 
    background: #9d9d9d; 
    background-image: -webkit-linear-gradient(top, #9d9d9d, #f3f3f3); 
    background-image: -moz-linear-gradient(top, #9d9d9d, #f3f3f3); 
    background-image: -ms-linear-gradient(top, #9d9d9d, #f3f3f3); 
    background-image: -o-linear-gradient(top, #9d9d9d, #f3f3f3); 
    background-image: linear-gradient(to bottom, #9d9d9d, #f3f3f3); 
    font-family: Arial; 
    color: red; 
    font-size: 15px; 
    padding: 10px 20px 10px 20px; 
    text-decoration: none; 
} 
.checkBox.x-form-cb-checked.x-form-checkbox { 
    color:black; 
    border:1px solid black; 
}

我试过使用.checkBox .x-form-checkbox + .checkBox:after{ content: 'text over'; }但它没有工作。请帮助

FIDDLE：https://fiddle.sencha.com/#fiddle/2qu

来源

2014-01-21 Jacob

你是什么文字了呢？你的意思是文字应该悬停显示？就像一个自定义标题？ –

您只需将标题属性添加到您的文本框。这将创建一个工具提示。 – Jerodev

通过以下方式生成的内容：before /：after应该被渲染，就像它被插入为它所应用的元素的第一个/最后一个_child_元素一样。但是输入元素不能有子元素。 – CBroe

事情是这样的正常工作在Chrome：

.checkBox .x-form-checkbox { 
    height: 25px; 
    width:75px; 
    background: #9d9d9d; 
    background-image: -webkit-linear-gradient(top, #9d9d9d, #f3f3f3); 
    background-image: -moz-linear-gradient(top, #9d9d9d, #f3f3f3); 
    background-image: -ms-linear-gradient(top, #9d9d9d, #f3f3f3); 
    background-image: -o-linear-gradient(top, #9d9d9d, #f3f3f3); 
    background-image: linear-gradient(to bottom, #9d9d9d, #f3f3f3); 
    font-family: Arial; 
    color: red; 
    font-size: 15px; 
    padding: 10px 20px 10px 20px; 
    text-decoration: none; 
    position: relative; 
    margin-top: 25px; 
} 

.x-form-checkbox:before { 
    color: #FFFF00; 
    content: "Text"; 
    display: block; 
    height: 25px; 
    left: 0; 
    position: absolute; 
    top: -25px; 
    width: 100px; 

}

但它没有例如在Firefox中，比较Is the :before pseudo-element allowed on an input[type=checkbox]?

这可以做在Javascript的伎俩：

var checkboxes = document.getElementsByClassName('x-form-checkbox'); 
var textDivClass = 'Checkbox-Text'; 
var checkboxTmp = []; 
for(var i = 0; i < checkboxes.length; i++){ 
    var txtEl = document.createElement('DIV'); 
    var classNode = document.createAttribute('class'); 
    classNode.nodeValue = textDivClass; 
    var textnode = document.createTextNode(checkboxes[i].getAttribute('data-title')); 
    txtEl.appendChild(textnode); 
    txtEl.setAttributeNode(classNode); 
    checkboxes[i].parentElement.appendChild(txtEl); 
    checkboxTmp.push(checkboxes[i]); 
} 

while(checkboxes.length != 0) 
    checkboxes[0].parentElement.removeChild(checkboxes[0]); 

var checkboxes = document.getElementsByClassName(textDivClass); 
for(var i = 0; i < checkboxes.length; i++){ 
    checkboxes[i].parentElement.appendChild(checkboxTmp[i]); 
}

来源

2014-01-21 11:21:18 websupporter

将内容添加到复选框

回答

相关问题