MyBB Community Forums

How can I edit the way checkboxes appear in my theme? How can I style it?

can you tell us what exactly you want to change ? And what is your forum url & which theme you are using ?

(2017-04-27, 02:57 PM).m. Wrote: [ -> ]can you tell us what exactly you want to change ? And what is your forum url & which theme you are using ?

I just want to edit the way it looks, the checkboxes in everywhere. [] Signature: include your signature. [] Disable Smilies: disable smilies from showing in this post.

or

() Do not subscribe to this thread
() Subscribe without receiving any notification of new replies

Things like that...

---

Any idea to change the checkbox style?

How can I set those tyhings up? How can I make it look black and stuff.

This is a nice tutorial on how to style check-boxes and to be honest.. they look awesome! :
https://codepen.io/CreativeJuiz/pen/BiHzp

Implement the code into you're global css and delete older check-box type declarations or append !IMPORTANT after you're recently added tag attributes.

(2017-05-04, 02:03 PM)zyra Wrote: [ -> ]This is a nice tutorial on how to style check-boxes and to be honest.. they look awesome! :
https://codepen.io/CreativeJuiz/pen/BiHzp

Implement the code into you're global css and delete older check-box type declarations or append !IMPORTANT after you're recently added tag attributes.

Not working, check boxes become invisible. Any other website or template you got? or it appears like the default one whenever it appears.

That works. You must set the label tag after input.

(2017-05-07, 10:21 AM)MrBrechreiz Wrote: [ -> ]That works. You must set the label tag after input.

I'm doing something wrong, could you detail label tag and the instructions? Thank you.

As for example only one input field.

Open your usercp_options template and find

<input type="checkbox" class="checkbox" name="invisible" id="invisible" value="1" {$invisiblecheck} />

change to

<input type="checkbox" class="checkbox css-checkbox" name="invisible" id="invisible" value="1" {$invisiblecheck} /><label for="invisible" class="css-label"></label>

Add in your global.css this

input[type=checkbox].css-checkbox {
 position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
}
input[type=checkbox].css-checkbox + label.css-label {
 padding-left:30px;
 height:12px; 
 display:inline-block;
 line-height:12px;
 background-repeat:no-repeat;
 background-position: 0 0;
 font-size:12px;
 vertical-align:middle;
 cursor:pointer;
 margin-top: 3px;
}
input[type=radio].css-checkbox + label.css-label {
 padding-left:30px;
 height:12px; 
 display:inline-block;
 line-height:12px;
 background-repeat:no-repeat;
 background-position: 0 0;
 font-size:12px;
 vertical-align:middle;
 cursor:pointer;
}
input[type=checkbox].css-checkbox:checked + label.css-label {
 background-position: 0 -12px;
}
label.css-label {
 background-image:url(images/checkbox.png);
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

Copy the attachment in your images folder.



This is MY EXAMPLE and you can change it as you want.