Skip to content

Instantly share code, notes, and snippets.

h1, h2, h3, h4, h5, h6 {
margin: 0;
}
h1 {
margin: 1.5em 0; /* 1 line of space above and below h1 only */
text-align: center;
text-transform: uppercase; /* only h1, h2 all caps */
}
### Keybase proof
I hereby claim:
* I am obiwankimberly on github.
* I am kimberlyblessing (https://keybase.io/kimberlyblessing) on keybase.
* I have a public key whose fingerprint is 4D75 40AD 960A B6B2 2BCE 77FC 980C 5663 B794 ED54
To claim this, I am signing this object:
@obiwankimberly
obiwankimberly / gist:6469618
Created September 6, 2013 20:35
How can we support custom radio buttons (graphics) while also ensuring accessibility and support when a user disables images?
<!doctype html>
<html>
<head>
<title>Custom Radio Buttons</title>
<style>
.field-radio {min-height:30px; margin:.3em 0;}
.container-radio {position:relative; display:inline-block; overflow:hidden; width:30px; height:30px; vertical-align:middle; background-color:#ccc;}
input[type=radio] {margin:0; margin:8px; padding:0;}
.fake-radio {position:absolute; top:0; left:0; display:block; width:30px; height:30px; background-repeat:no-repeat; background-position:0 0;}
input:checked + .fake-radio {background-position:0 -35px;}