MyBB Community Forums
Styling the Checkboxes - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: 1.8 Support (https://community.mybb.com/forum-175.html)
+--- Forum: General Support (https://community.mybb.com/forum-176.html)
+--- Thread: Styling the Checkboxes (/thread-210060.html)

Pages: 1 2


Styling the Checkboxes - Glunar - 04-27-2017

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


RE: Styling the Checkboxes - .m. - 04-27-2017

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


RE: Styling the Checkboxes - Glunar - 04-29-2017

(04-27-2017, 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?


Checkbox And Circlebox Templates - Glunar - 05-01-2017

[Image: R0ZNGa.png]


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


RE: Checkbox and Circles - Lewis H - 05-04-2017

http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css


RE: Styling the Checkboxes - zyra - 05-04-2017

This is a nice tutorial on how to style check-boxes and to be honest.. they look awesome! Big Grin :
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.


RE: Styling the Checkboxes - Glunar - 05-07-2017

(05-04-2017, 02:03 PM)zyra Wrote: This is a nice tutorial on how to style check-boxes and to be honest.. they look awesome! Big Grin :
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.


RE: Styling the Checkboxes - MrBrechreiz - 05-07-2017

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


RE: Styling the Checkboxes - Glunar - 05-07-2017

(05-07-2017, 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.


RE: Styling the Checkboxes - MrBrechreiz - 05-07-2017

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.