Inline Radio Buttons

index.html

<form>
<group class="inline-radio">
	<div><input type="radio" name="title"><label>Mr</label></div>
	<div><input type="radio" name="title" checked><label>Miss</label></div>
	<div><input type="radio" name="title"><label>Mrs</label></div>
	<div><input type="radio" name="title"><label>Ms</label></div>
	<div><input type="radio" name="title"><label>Dr</label></div>
</group>
<group class="inline-radio">
	<div><input type="radio" name="visits"><label>Never</label></div>
	<div><input type="radio" name="visits"><label>Rarely</label></div>
	<div><input type="radio" name="visits" checked><label>Often</label></div>
	<div><input type="radio" name="visits"><label>Loads</label></div>
</group>
<group class="inline-radio">
	<div><input type="radio" name="lives" checked><label>Village</label></div>
	<div><input type="radio" name="lives"><label>Town</label></div>
	<div><input type="radio" name="lives"><label>City</label></div>
</group>
<group class="inline-radio">
	<div><input type="radio" name="member"><label>Yes</label></div>
	<div><input type="radio" name="member" checked><label>No</label></div>
</group>
</form>

Inline Radio Buttons.markdown

Inline Radio Buttons

Using labels (with pointer-events: none) to overlay radio inputs. I was inspired to make this after reading "Dropdowns Should be the UI of Last Resort" article here: http://www.lukew.com/ff/entry.asp?1950

A Pen by lukejacksonn on CodePen.

License.

script.js

// Included fastclick.js to make the inputs quicker to respond to taps on mobile

if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}

scripts

<script src="https://rawgit.com/ftlabs/fastclick/master/lib/fastclick.js"></script>

style.css

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background: #e91e63;
  font-family: 'Roboto', sans-serif;
  display: flex;
  padding: 30px;
}

form {
  background: #fff;
  width: 100%;
  margin: auto;
  padding: 30px;
  min-width: 320px;
  max-width: 540px;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-radius: 3px;
}

h1 {
  color: #fff;
}

group + group {
  margin-top: 20px;
}

.inline-radio {
	display: flex;
  border-radius: 3px;
	overflow: hidden;
  border: 1px solid #b6b6b6;


	div {
		position: relative;
		flex: 1;
	}

	input {
    width: 100%;
		height: 60px;
    opacity: 0;
	}

	label {
		position: absolute;
		top: 0; left: 0;
		color: #b6b6b6;
		width: 100%;
		height: 100%;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		pointer-events: none;
		border-right: 1px solid #b6b6b6;
	}

	div:last-child label {
		border-right: 0;
	}

	input:checked + label {
		background: #d81b60;
    font-weight: 500;
		color: #fff;
	}
}