Contact US

Question

CSS & Checkboxes

1DMF (Programmer)

(OP)

30 May 14 04:14

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

ChrisHirst (IS/IT--Management) · Answer 1 · 2014-05-30 10:39:06

Quote:
Can you get it to work in all of them?

With some difficulty!
http://www.smashingmagazine.com/2013/02/27/css-for...

Chris Coyier comes to to the rescue though. :)

http://css-tricks.com/snippets/css/custom-checkbox...

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

Borvik (Programmer) · Answer 2 · 2014-05-30 16:48:20

I had wanted to use FontAwesome for some checkboxes and found a CSS solution here:
http://stackoverflow.com/questions/11223615/how-to...

1DMF (Programmer) · Answer 3 · 2014-06-02 09:58:08

Thanks Borvik, just what I needed.

Downloaded the font, applied the CSS , works a treat

"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

1DMF (Programmer) · Answer 4 · 2014-06-02 11:15:39

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

"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

Borvik (Programmer) · Answer 5 · 2014-06-02 16:37:43

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/

1DMF (Programmer) · Answer 6 · 2014-06-03 04:45:10

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

1DMF (Programmer) · Answer 7 · 2014-06-03 05:58:57

The font is now working in IE9 now I fixed the typo in the @font-face for the IE TTF fix! d'oh!

"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

1DMF (Programmer) · Answer 8 · 2014-06-03 10:51:37

BTW - Good call with the opacity, I found Chrome on XP doesn't pop-up the validation bubble when the element is set to invisible!

"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

Borvik (Programmer) · Answer 9 · 2014-06-03 11:12:40

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.

1DMF (Programmer) · Answer 10 · 2014-06-03 11:31:20

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 )

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

Borvik (Programmer) · Answer 11 · 2014-06-03 11:41:10

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.

1DMF (Programmer) · Answer 12 · 2014-06-03 12:08:31

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

Borvik (Programmer) · Answer 13 · 2014-06-03 12:15:06

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.

Come Join Us!

Posting Guidelines

CSS & Checkboxes

CSS & Checkboxes

CSS & Checkboxes

RE: CSS & Checkboxes

Quote:

RE: CSS & Checkboxes

RE: CSS & Checkboxes

RE: CSS & Checkboxes

CODE

RE: CSS & Checkboxes

CODE

RE: CSS & Checkboxes

RE: CSS & Checkboxes

RE: CSS & Checkboxes

RE: CSS & Checkboxes

RE: CSS & Checkboxes

Quote:

RE: CSS & Checkboxes

RE: CSS & Checkboxes

CODE

RE: CSS & Checkboxes

Red Flag This Post

Red Flag Submitted

Reply To This Thread

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

Join Tek-Tips^® Today!

Contact US

Come Join Us!

Posting Guidelines

CSS & Checkboxes

CSS & Checkboxes

CSS & Checkboxes

RE: CSS & Checkboxes

Quote:

RE: CSS & Checkboxes

RE: CSS & Checkboxes

RE: CSS & Checkboxes

CODE

RE: CSS & Checkboxes

CODE

RE: CSS & Checkboxes

RE: CSS & Checkboxes

RE: CSS & Checkboxes

RE: CSS & Checkboxes

RE: CSS & Checkboxes

Quote:

RE: CSS & Checkboxes

RE: CSS & Checkboxes

CODE

RE: CSS & Checkboxes

Red Flag This Post

Red Flag Submitted

Reply To This Thread

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

Join Tek-Tips® Today!

Join Tek-Tips^® Today!