#pseudoselectors

[htmlspank]

Custom checkboxes/radios in pure CSS

This idea comes on my mind when I was working on http://discovervanuatu.com.au. I needed to skin checkboxes really quickly and I didn’t want to use another jQuery plugin - just because I didn’t want to increase the overall javascript size if I need to skin 3 checkboxes only.

The solution is easy - just add one span right after an input, skin that span, hide the input and skin the span if the input is selected. The last thing might look as a blocker, but using pseudo-selector “:checked” brings some light on that.

Crucial is to select the right span, which we can achive by using a selector “+”. So the the whole magic is this: “input:checked + span”.

Last thing that is good to think about is to cache the checked state. The cross sign should be image and there might be small delay between first click and showing the checked state. There are several ways how to deal with this - using a sprite sheet, an inline image in CSS and so on. I’ve choosed to inline the image in the CSS using base64 encoding. Fast and easy…

The full solution is here: http://jsfiddle.net/lucien144/s9mmbz88

This should work in all new browsers and IE9+. Actually tested in IE9, FF, Safari 8, Chrome and Safari 8 on iOS.

Enjoy!

[htmlspank]

Highlight asterix in placeholder w/ 2 different color

Imagine designer designs a form where mandatory fields are highlighted using asterix and this asterix is a part of the placeholder. The issue begins when the asterix is highlighted by different color than the placeholder is.

Here's an example:

How to do that using CSS? Well, the clean solution offers Webkit only - you can use :before pseudo-selector on :placeholder selector there. The dark side of this solution is this won't work in IE nor Firefox.

Here's the code (in LESS using LessHat, as it's faster for me to write):

input[type=text] { &.required { &::-webkit-input-placeholder { color: blue; &:before { content: '*'; color: red; vertical-align: top; font-size: small; } } } }

As you can see, we are moving the asterix slightly up to fake supperscript. Instead of using vertical-align: top; we can use vertical-align: super; - but then the placeholder can be pushed down and it does not look good.

So, that's it. But now we are facing another problem - the dark side. How to deal with it? First step is that we have to do a fallback for other browsers.

Simply put the asterix into the placeholder attribute!

<input type="text" name="name" placeholder="*First name" />

Now we are facing another problem - Webkit browsers displaying 2 asterixes! Well, that's easy to fix using Javascript. Here's a code in CoffeeScript:

if RegExp(' AppleWebKit/').test navigator.userAgent $('input.required').each -> if RegExp(/^\*/).test $(this).attr('placeholder') $(this).attr('placeholder', $(this).attr('placeholder').replace '*', '' )

Voila, that's it! So, webkit browsers display highlighted asterix, although other browsers display at least some asterix...

Cool, huh?

Fiddle here: http://jsfiddle.net/lucien144/x935vobn/