INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

CSS & Checkboxes

CSS & Checkboxes

(OP)
Hi,

Can someone advise if under HTML5 & CSS3, altering the appearance of a checkbox is meant to be possible.

In my tests it seems the 4 major browsers (windows), are split down the middle.

Works = I.E. & Google Chrome
Doesn't = FireFox & Opera

Can you get it to work in all of them?

Thanks,
1DMF.

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

RE: CSS & Checkboxes

(OP)
correction doesn't work when using HTML5 required attribute, the popup message when it wasn't checked was in a bizarre un-related location.

I finally got it working with...

CODE

input[type="radio"],
input[type="checkbox"] {
  display:block;
  visibility:hidden;
  width:40px;
  float:right; 
  margin:-45px -50px 0 0 !important;  
  z-index:999999;
}

input[type="radio"] + span:after,
input[type="checkbox"] + span:after {
    font-family: 'FontAwesome';
    font-size: 40px;
    margin:-50px -50px 0 0 !important; 
    float:right;
    
}

input[type="radio"] + span:after {
  content: "\f10c"; /* circle-blank */
}

input[type="radio"]:checked + span:after {
  content: "\f111"; /* circle */
}

input[type="checkbox"] + span:after {
  content: "\f096"; /* check-empty */
}

input[type="checkbox"]:checked + span:after {
  margin:-50px -56px 0 0 !important;
  content: "\f046"; /* check */
} 

It's imperative that you float the real input element over the CSS inserted content, so the validation popup messages are in the correct place.

I am also now having to look for a shim/polyfill as this isn't working in IE9 sad

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

RE: CSS & Checkboxes

Thanks for bringing that to my attention 1DMF!

Your solution didn't work for me, as I was using ems for my sizing, as well as some centering, and left side checkboxes.

I did find something that worked for me though (normalized css and more styles of course):

CODE

<style>
input[type=radio], input[type=checkbox]{
	width: 1em; height: 1em;
	margin-right: -1em;
	z-index: -5;
	opacity: 0;
}
</style>
<div class="checklist-r center"><input name="chkPolicy" value="agree" required="required" id="formInput_10" type="checkbox"><label for="formInput_10">I Agree to the Policy</label> <span class="tip">(<a target="_blank" href="">view</a>)</span></div> 
See here: http://jsfiddle.net/59mwf/

RE: CSS & Checkboxes

(OP)
No problem, I see you achieve the same with opacity.

Yes my checkbox is to the right of the label text, which is proving to be a bit of a pain, as the box moves between checked and unchecked, due to the character size difference.

I have to have differing margins between the two states!

Now hunting for a polyfil!

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

RE: CSS & Checkboxes

Yes, though I found I had to target IE8 as well - it didn't like the opacity in that jsFiddle.

My code is using js to target ie < 9 to move the checkbox off the screen, and as IE8 doesn't support the required attribute (we're all validating on the server too right wink) that doesn't matter as much to me.

You could probably do that with conditional css as well.

Though as IE8 doesn't support the :checked css selector, a polyfill was needed for that as well.

RE: CSS & Checkboxes

(OP)
Well I've given up with HTML5 / CSS3 polyfills / shims and <IE9.

I have had the go ahead from the CEO to drop support for non-HTML5 browsers.

It's only M$ and Vista causing this problem, anyone else can simply update their browser and it will work, you cannot update IE on Vista!

So I'm now clearing my mind of non-HTML5/CSS3 problems and coding just for this platform, we don't have nor support mobile devices nor Apple, so I'm not going to polyfill anything moving forward, it's all too flaky, unreliable, and unsupported.

Hand holding users while they upgrade their browser is far more time efficient and easier than trying to get cross browser polyfilled functionality.

Quote:

(we're all validating on the server too right wink)
OH yes, goes without saying having defensive programming server side, just trying to make the UI/UX better via the new HTML5 platform first, I'll worry about server side once I have the GUI working how I want it.

An Aside : Opera is broken again! and no validation popup bubble is showing for 'required', not even with the polyfill webshim does it work, once again showing it's all a waste of time!

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

RE: CSS & Checkboxes

Hmm... that jsFiddle is still working in Opera with the validation popup (just updated and tested on 12.17).

Glad you were able to get your browser support for obsolete browsers dropped. Unfortunately we cannot, we still have 24% of our users still using IE8 - probably people who are stuck on XP for whatever reason. Thankfully less than 2% are on previous version and I can drop those.

RE: CSS & Checkboxes

(OP)
Well being in Financial Services, and the fact M$ has dropped support for XP, it's not acceptable for our users to be on XP really, it's a security risk!

BTW - apparently Opera 16 was broken, then fixed, and now it's broken again in Opera 20+

I can confirm the JS fiddle doesn't work in Opera 22.0.1471.50 - the one I am currently using.

Another aside for XP and IE8 - JQuery UI Dialog breaks JS as it tries to set focus on an element that doesn't like it, I have had to wrap it in a try/catch to get it to work on IE8...

CODE

// show dialog
    try
    {
        $( '#dialog' ).dialog(myOptions);
    }
    catch(err)
    {
        return;
    }; 

Never rains does it!

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

RE: CSS & Checkboxes

That's pretty backwards of Opera, even without ANY css it still doesn't show the required popup.

It does still focus back to the field, so perhaps the :focus selector can help.

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close