Forums

I've been seeing a strange problem with checkboxes in a large form I'm creating, so I created a small test form to show the issue.

When a checkbox with a secondary label is checked, a second checkmark/checkbox appears next to the actual checkbox, as shown in this screenshot:



The blue checkbox is live, that is, you can uncheck it and both the box on its left and the blue box become unchecked and the blue box disappears.

What could be causing this? Thanks in advance for any help.

Hi WhataMack,

At a guess something in your template is creating the second checkboxes - we've seen this with RocketTheme templates before, the answer for them is usually to disable Input Formatting in the template settings.

Bob

Hi, thanks for the suggestion but I'm using the Beez3 template for this test. Would you suspect this could happen with that template as well?

Hi WhataMack,

No - and I just switched my test site to Beez3 with no problems.

Please post a link to the form so I can take a quick look.

Bob

Hi Bob, the test form is here.

Hi Whatamack,

The extra tick is coming from this CSS

input[type="checkbox"]:checked+label:before {
	content: "\2714";
	text-indent: 0;
	background: -moz-linear-gradient(-45deg, #fefefe, #0b70cd);
	background: -webkit-linear-gradient(-45deg, #fefefe, #0b70cd);
	background: -o-linear-gradient(-45deg, #fefefe, #0b70cd);
	background: -ms-linear-gradient(-45deg, #fefefe, #0b70cd);
	background: linear-gradient(-45deg, #fefefe, #0b70cd);
	border: 1px solid #0B70CD;
}

at line 357 of templates/beez3/css/layout.css

And I was wrong before - it is a Beez template feature. No option to turn it off though :-(

Bob

You're right, it sure looks to be tied to the Beez3 template. I tried the test form using about five other templates, including the stock protostar template, and the problem didn't show up in any of them.

Do you know if it's unusual to see problems like this using the Beez3 template? You'd think that a default template would be the place where everything works. If things like this are known to happen with that template, the Joomla people should either make some fixes or ditch the thing.

Hi WhataMack,

I don't remember seeing this particular one before. Adding this in a Load CSS action seems to work to hide it

.gbs3 input[type="checkbox"]:checked+label:before {
 display: none !important;
}

Bob