StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Depending on which browsers you aim to support, you could use the <a href="http://www.w3.org/TR/css3-selectors/#checked" rel="noreferrer"><code>:checked</code> pseudo-class</a> selector in addition to hiding the radio buttons.</p> <p>Using this HTML:</p> <pre class="lang-html prettyprint-override"><code><input type="radio" id="toggle-on" name="toggle" checked ><label for="toggle-on">On</label ><input type="radio" id="toggle-off" name="toggle" ><label for="toggle-off">Off</label> </code></pre> <p>You could use something like the following CSS:</p> <pre class="lang-css prettyprint-override"><code>input[type="radio"].toggle { display: none; } input[type="radio"].toggle:checked + label { /* Do something special with the selected state */ } </code></pre> <p>For instance, (to keep the custom CSS brief) if you were using <a href="http://twitter.github.com/bootstrap/" rel="noreferrer">Bootstrap</a>, you might add <code>class="btn"</code> to your <code><label></code> elements and style them appropriately to create a toggle that looks like:</p> <p><img src="https://i.stack.imgur.com/CREwq.png" alt="Bootstrap-aided radio toggle"></p> <p>...which just requires the following additional CSS:</p> <pre><code>input[type="radio"].toggle:checked + label { background-image: linear-gradient(to top,#969696,#727272); box-shadow: inset 0 1px 6px rgba(41, 41, 41, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); cursor: default; color: #E6E6E6; border-color: transparent; text-shadow: 0 1px 1px rgba(40, 40, 40, 0.75); } input[type="radio"].toggle + label { width: 3em; } input[type="radio"].toggle:checked + label.btn:hover { background-color: inherit; background-position: 0 0; transition: none; } input[type="radio"].toggle-left + label { border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } input[type="radio"].toggle-right + label { border-top-left-radius: 0; border-bottom-left-radius: 0; } </code></pre> <p>I've included this as well as the extra fallback styles in a <strong><a href="http://jsfiddle.net/tms/uPv6X/" rel="noreferrer">radio button toggle jsFiddle demo</a></strong>. Note that <code>:checked</code> is only supported in IE 9, so this approach is limited to newer browsers.</p> <p>However, if you need to support IE 8 and are willing to fall back on JavaScript*, you can hack in pseudo-support for <code>:checked</code> without too much difficulty (although you can just as easily set classes directly on the label at that point).</p> <p>Using some quick and dirty jQuery code as <strong><a href="http://jsfiddle.net/tms/DBZPh/" rel="noreferrer">an example of the workaround</a></strong>:</p> <pre><code>$('.no-checkedselector').on('change', 'input[type="radio"].toggle', function () { if (this.checked) { $('input[name="' + this.name + '"].checked').removeClass('checked'); $(this).addClass('checked'); // Force IE 8 to update the sibling selector immediately by // toggling a class on a parent element $('.toggle-container').addClass('xyz').removeClass('xyz'); } }); $('.no-checkedselector input[type="radio"].toggle:checked').addClass('checked'); </code></pre> <p>You can then make a few changes to the CSS to complete things:</p> <pre><code>input[type="radio"].toggle { /* IE 8 doesn't seem to like to update radio buttons that are display:none */ position: absolute; left: -99em; } input[type="radio"].toggle:checked + label, input[type="radio"].toggle.checked + label { /* Do something special with the selected state */ } </code></pre> <p><sub>*If you're using Modernizr, you can use the <a href="https://gist.github.com/paulirish/441842" rel="noreferrer"><code>:selector</code> test</a> to help determine if you need the fallback. I called my test "checkedselector" in the example code, and the jQuery event handler is subsequently only set up when the test fails.</sub></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload