Adding content to checkbox

Question

I have the following CSS working on my checkbox. How can I add the content attribute to display text over it.

.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;
}

I have tried using .checkBox .x-form-checkbox + .checkBox:after{ content: 'text over'; } but it did not work. Please help

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

What do you mean by text over? You mean text should be shown on hover? just like a custom title? — Mr. Alien, Jan 21 '14 at 10:02
You just have to add the title attribute to your textbox. This will create a tooltip. — Jerodev, Jan 21 '14 at 10:04
Generated content via :before/:after is supposed to be rendered as if it was inserted as a first/last _child_ element of the element it is applied to. Input elements however can not have child elements. — CBroe, Jan 21 '14 at 10:06
I want to display text over the checkbox. I have styled to look as a button. — Jacob, Jan 21 '14 at 10:06
Can you make a fiddle? I tried making one but I can't see the styled button that you mentioned. Chrome is not stretching the checkbox. http://jsfiddle.net/M8DE3/ anyway the link will show you a checkbox with text over it using `css :after`. — Jo E., Jan 21 '14 at 10:16
you have to use a label related to this input. this label can be style and will accept :after/:before if dispay is reset to not inline — G-Cyrillus, Jan 21 '14 at 10:38
I don't know what exactly is the problem? Do you want some text to appear when you mouse over the checkbox? — Ahmed Hamdy, Jan 21 '14 at 11:17

score 0 · Accepted Answer · edited May 23 '17 at 12:28

Something like this works fine in 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;

}

But it doesn't e.g. in Firefox, compare Is the :before pseudo-element allowed on an input[type=checkbox]?

This could do the trick in 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] );
}

Adding content to checkbox

1 Answers1