Machmal braucht es nicht viel, um einer Seite ein gewisses Maß an Individualität ein zu hauchen, quasi dieses kleine i-Tüpfelchen.

Dies habe ich in unseren Produkten gerade mal getan, indem ich anstelle der Standard-Browser radio-Inputs per CSS optische Buttons gebaut hab, die man aus Frameworks wie bootstrap als button-groups kennt. Gerne teile ich hier diesen kleinen aber feinen CSS-Hack:

Beispiel:

CSS:

.radio-group {
border: solid 1px #ccc;
display: inline-block;
border-radius: 4px;
overflow: hidden;
font-size: 0;
}

[type=radio].btn-radio {
position: absolute;
visibility: hidden;
display: none;
}

.label-btn-radio {
color: #555;
display: inline-block;
cursor: pointer;
font-size: 14px;
font-weight: normal;
padding: 10px;
margin-bottom: 0;
}

[type=radio].btn-radio:checked + .label-btn-radio {
color: #555;
background: #e9ebee;
}

.label-btn-radio:hover {
color: #555;
background: #e9ebee;
}

label + [type=radio] + .label-btn-radio {
border-left: solid 1px #ccc;
}

HTML:

<span class="radio-group">


<input type="radio" id="option-one" class="btn-radio" name="selector" checked="checked">
<label for="option-one" class="label-btn-radio">One</label>


<input type="radio" id="option-two" class="btn-radio" name="selector">
<label for="option-two" class="label-btn-radio">Two</label>


<input type="radio" id="option-three" class="btn-radio" name="selector">
<label for="option-three" class="label-btn-radio">Three</label>


</span>