Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS & Checkboxes 1

Status
Not open for further replies.
1DMF

1DMF

Programmer
Jan 18, 2005
8,795
GB
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
 
Sort by date Sort by votes
Upvote 0 Downvote
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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:
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Upvote 0 Downvote
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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.

(we're all validating on the server too right [wink])
Click to expand...
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
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
2K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
920
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
760
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
875
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
334
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top