SELECT:
Text for test. Text for test. Text for test. Text for test. Text for test. Text for test. Text for test. Text for test. Text for test. Text for test. Text for test. Text for test. Text for test. Text for test. Text for test.
HTML CODE : 
<span class="label">SELECT:</span>
<span class="select">
<input id="r1" name="test" value="1" checked="checked" type="radio" /><label for="r1">111</label>
<input id="r2" name="test" value="2" type="radio" /><label for="r2">222</label>
<input id="r3" name="test" value="3" type="radio" /><label for="r3">333</label>
<input id="r4" name="test" value="4" type="radio" /><label for="r4">444</label>
<input id="r5" name="test" value="5" type="radio" /><label for="r5">555</label>
</span>
</span>
CSS CODE : 
input[type='radio'] {
    opacity: 0;
    margin-bottom: -2em;
    float: left;
    clear: left;
}
input[type='radio']+label {
    float: left;
    clear: left;
    display: none;
    padding: 1px 0.5em 1px 1em;
    border: 1px solid #666;
    width: 3em;
    background-color: #fff;
}
input[type='radio']:checked+label {
    display: block;
    margin: 0;
    background-color: #aa5;
    color: #fff;
}
input[type='radio']+label:hover {
    background-color: #ccc;
}
input[type='radio']:focus+label {
    display: block;
    border-width: 1px;
    margin: 1px 0;
    background-color: #ccc;
}
input[type='radio']:focus+label:after {
    content: '?';
}
input[type='radio']:focus:checked+label {
    margin: 0;
}
input[type='radio']:focus:checked+label:after {
    content: '';
}
span.select:hover label {
    display: block;
    border-width: 1px 1px 0;
    margin: 0;
}
span.select:hover label:last-child {
    border-bottom: 1px solid #666;
    -moz-border-radius: 0 0 15px 15px;
}
span.select>span {
    display: block;
    margin-bottom: -100%;
    position: relative;
}
span.select {
    display: block;
    float: left;
    height: 1px;
}
span.label {
    float: left;
    line-height: ;
    padding: 2px 0.3em 2px 0;
}