public
Created

Classic Digg-Style Radio Buttons with just CSS

  • Download Gist
dabblet.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
}
html { background: #fff; height: 101%; font-family: Arial, Verdana, Tahoma, sans-serif; }
body { font-size: 62.5%; line-height: 1; padding-bottom: 75px; }
 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
 
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
 
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
 
h2 { display: inline-block; font-size: 1.9em; }
 
p { font-size: 1.4em; line-height: 1.35em; color: #444; margin-bottom: 15px; }
 
a { color: #6b7fdd; text-decoration: none; }
a:hover { color: #111; text-decoration: none; }
 
/** page outline **/
#w { max-width: 900px; min-width: 350px; margin: 0 auto; padding-top: 35px; }
 
/** form **/
#diggform { display: block; }
 
#cathead { display: block; }
#cathead h2 { padding: 9px 22px; background: #a1c175; color: #fff; text-shadow: 0px 1px 0px #8aa56d; border-top-right-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 64px; -webkit-border-top-left-radius: 6px; -moz-border-radius-topleft: 6px; }
#cathead p { font-size: 1.2em; padding: 10px; color: #7c9a5f; background: #eff7e8; border-top: 1px solid #92af6a; }
 
 
input[type=radio] { display: none; /* comment out to display all radio buttons */ }
 
 
#catlinks { }
#catlinks .row { display: block; border-bottom: 1px solid #dbdbdb; margin-bottom: 5px; padding: 11px 4px; padding-bottom: 18px; font-size: 1.2em; }
 
#catlinks .row h3 { display: inline-block; color: #5c5c5c; font-weight: bold; width: 140px; }
#catlinks .row span { font-size: 0.9em; font-weight: bold; padding: 7px 8px; margin-right: 3px; border: 1px solid #fff; }
 
#catlinks .row span:hover { border: 1px solid #dbdbdb; background: #eee; }
 
#catlinks .row input[type=radio]:checked + span { background: #6b7fdd; color: #fff; border: 1px solid #6470a9; }
#catlinks .row #catlinks .row input[type=radio]:checked + span:hover { background: #4964e1; }
dabblet.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
 
<div id="w">
<form name="diggform" id="diggform" method="post" action="index.html">
<header id="cathead">
<h2>Choose a Topic</h2>
<p>Tell us where your submission should be listed. Select a category below which best represents your news.</p>
</header>
<section id="catlinks">
<div class="row">
<h3>Technology</h3>
<label class="c" for="category_apple"><input type="radio" name="category" value="apple" id="category_apple"><span>Apple</span></label>
<label class="c" for="category_design"><input type="radio" name="category" value="design" id="category_design"><span>Design</span></label>
<label class="c" for="category_gadgets"><input type="radio" name="category" value="gadgets" id="category_gadgets"><span>Gadgets</span></label>
<label class="c" for="category_hardware"><input type="radio" name="category" value="hardware" id="category_hardware"><span>Hardware</span></label>
</div>
</section>
</form>
</div>
settings.json
JSON
1
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}

This is slightly modified version of Classic Digg-Style Radio Buttons with CSS and jQuery to get rid of jQuery or even JavaScript dependency.

This is slightly modified version of Classic Digg-Style Radio Buttons with CSS and jQuery to get rid of jQuery or even JavaScript dependency.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.