将内容添加到复选框答案

【问题标题】：Adding content to checkbox将内容添加到复选框
【发布时间】：2014-02-10 20:26:25
【问题描述】：

我的复选框上有以下 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'; }，但没有成功。请帮忙

小提琴：https://fiddle.sencha.com/#fiddle/2qu

【问题讨论】：

文本结束是什么意思？你的意思是文字应该在悬停时显示？就像自定义标题一样？
您只需将标题属性添加到您的文本框。这将创建一个工具提示。
通过 :before/:after 生成的内容应该被渲染为好像它是作为它应用到的元素的第一个/最后一个 child 元素插入的一样。但是输入元素不能有子元素。
我想在复选框上显示文本。我的样式看起来像一个按钮。
你会做一个小提琴吗？我尝试制作一个，但看不到您提到的样式按钮。 Chrome 没有拉伸复选框。 jsfiddle.net/M8DE3 无论如何，该链接将使用css :after 向您显示一个带有文本的复选框。

标签： javascript css checkbox

【解决方案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] );
}

【讨论】：