Question

我的复选框上有以下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

Answer 1

这样的功能在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] );
}

添加内容到复选框

1 个答案: