Howto: CSS3 formatting of checkbox

Seagul
OFFLINE
Posts: 20
Thanks: 1
Karma: 0

10 years 5 months ago #244911 by Seagul

Howto: CSS3 formatting of checkbox was created by Seagul

Hello,

I need to style my custom field checkboxes with CSS3.
At the moment (J3.2.4, CB 1.9) my checkbox HTML code looks like this:

Code:

<div class="cbSingleCntrl">
	<input type="checkbox" name="cb_mapeintrag" id="cb_mapeintrag" value="1">
	<span class="cbFieldIcons"></span>
</div>

But I would need this code:

Code:

<div class="cbSingleCntrl">
	<input type="checkbox" name="cb_mapeintrag" id="cb_mapeintrag" value="1">
	<label for="cb_mapeintrag"></label>
</div>

How can I add the <label> html-element?
I found the position in cb.core.php file around line 969. Is there a chance to overwrite this code without core hacking?

Or is there any other possibility to style my checkboxes?

Thanks,
Seagul

Please Log in or Create an account to join the conversation.

krileon
ONLINE
Posts: 48478
Thanks: 8282
Karma: 1443

10 years 5 months ago #244944 by krileon

Replied by krileon on topic Howto: CSS3 formatting of checkbox

The below is CB 2.0 format of checkboxes.

LABEL_OPEN
INPUT
LABEL_CLOSE

For CB 1.x there's no changing it without changing the core code, which I can't advise you on as we do not support core edits.

You maybe able to use :after or :before CSS usage if you're trying to append an image or something to the checkbox. I'd need more information on the CSS you're trying to use in order to suggest anything further.

Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in or Create an account to join the conversation.

Seagul
OFFLINE
Posts: 20
Thanks: 1
Karma: 0

10 years 5 months ago #244953 by Seagul

Replied by Seagul on topic Howto: CSS3 formatting of checkbox

Hi there,

I wanted to something like this:
cssdeck.com/labs/css-checkbox-styles
like the circle in the middle.

But for styling it like this I need to change the html-elements and add a label.

If this (above) does not work I need any other possibility to make the checkbox bigger.
Attached you find my code.
But all the stylings for input#cb_mapeintrag don't work and the checkbox always looks the same...
Any ideas?

Attachments:

Please Log in or Create an account to join the conversation.

krileon
ONLINE
Posts: 48478
Thanks: 8282
Karma: 1443

10 years 5 months ago - 10 years 5 months ago #244957 by krileon

Replied by krileon on topic Howto: CSS3 formatting of checkbox

Yes, that's somewhat doable using pure CSS and no label. The below is an example put together using the sites CSS you linked.

Code:

.cbSingleCntrl input[type=checkbox] {
	position: relative;
	height: 28px;
	width: 28px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;
}

.cbSingleCntrl input[type=checkbox]:before {
	content:"";
	display:inline-block;
	width: 28px;
	height: 28px;
	background: #fcfff4;
	background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
	box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
	position: relative;
}

.cbSingleCntrl input[type=checkbox]:after {
	content:"";
	display: inline-block;
	z-index: 99;
	cursor: pointer;
	width: 20px;
	height: 20px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	left: 4px;
	top: 4px;
	-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
	-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
	box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
	background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
	background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
	background: -o-linear-gradient(top, #222 0%, #45484d 100%);
	background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
	background: linear-gradient(top, #222 0%, #45484d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
	position: absolute;
}

.cbSingleCntrl input[type=checkbox]:hover:after,
.cbSingleCntrl input[type=checkbox]:checked:hover:after,
.cbSingleCntrl input[type=checkbox]:checked:after {
	background: #00bf00;
	background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
	background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
	background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
	background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
	background: linear-gradient(top, #00bf00 0%, #009400 100%);
}

.cbSingleCntrl input[type=checkbox]:hover:after {
	background: #025E02;
}

The above has been tested working here at Joomlapolis using developer console of Chrome. I did not test in FF or IE, but should probably still work in them too. Adjust as needed for further styling changes.

Last edit: 10 years 5 months ago by krileon.

Please Log in or Create an account to join the conversation.

Seagul
OFFLINE
Posts: 20
Thanks: 1
Karma: 0

10 years 5 months ago - 10 years 5 months ago #244972 by Seagul

Replied by Seagul on topic Howto: CSS3 formatting of checkbox

Edited: Yes, looks good in Chrome and Safari, but not at all in Firefox. I guess my client will have to live with that...

Attachments:

Last edit: 10 years 5 months ago by Seagul.

Please Log in or Create an account to join the conversation.

Seagul
OFFLINE
Posts: 20
Thanks: 1
Karma: 0

10 years 5 months ago #244982 by Seagul

Replied by Seagul on topic Howto: CSS3 formatting of checkbox

But a big thank you anyways! it helped a lot!

Please Log in or Create an account to join the conversation.

Moderators: beat, nant, krileon