<label for="select" class="select">
<input type="radio" name="list" value="not_changed" id="bg" checked />
<input type="radio" name="list" value="not_changed" id="select">
<label class="bg" for="bg"></label>
<div class="items">
<input type="radio" name="list" value="first_value" id="list[0]">
<label for="list[0]">First option</label>
<input type="radio" name="list" value="second_value" id="list[1]">
<label for="list[1]">Second loooooong option</label>
<span id="text">Select something...</span>
</div>
</label>
<a href="#" onclick="alert(document.querySelector('input[name=list]:checked').value)">Show selected value</a>
input
{
display: none;
}
#text
{
position: absolute;
display: block;
top: 0;
padding-left: 10px;
}
.select
{
display: inline-block;
width: 160px;
height: 34px;
line-height: 30px;
position: relative;
}
.select:before
{
content: ">";
display: inline-block;
background: white;
position: absolute;
right: -5px;
top: 2px;
z-index: 2;
width: 30px;
height: 26px;
text-align: center;
line-height: 26px;
border: 2px solid #ddd;
transform: rotate(90deg);
cursor: pointer;
}
.select input[name="list"]:not(:checked) ~ #text
{
color: black;
background: white;
}
.select input[name="list"]:checked ~ #text
{
background: transparent;
color: transparent;
z-index: 2;
}
#select:disabled ~ .items #text
{
background: #eee;
}
.items
{
display: block;
min-height: 30px;
position: absolute;
border: 2px solid #ddd;
overflow: hidden;
width: 160px;
cursor: pointer;
}
#select:not(:checked) ~ .items
{
height: 30px;
}
.items label
{
border-top: 2px solid #ddd;
display: none;
padding-left: 10px;
background: white;
}
.items label:hover
{
background: #eee;
cursor: pointer;
}
#select:checked ~ .items
{
padding-top: 30px;
}
#select:checked ~ .items label
{
display: block;
}
.items input:checked + label
{
display: block!important;
border: none;
background: white;
}
#select:checked ~ .bg
{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 0;
background: rgba(0,0,0,0.4);
}
a
{
display: block;
width: 160px;
text-align: center;
padding: 5px 0;
color: black;
text-decoration: none;
border: 2px solid #ddd;
}
a:hover
{
cursor: pointer;
border-color: red;
}
//Custom <select> without JS
//JS used only to show you selected value
//Black bg is optional. You can disable this by remove background style in line 114
//If you want to disable select you need to add attribute disabled to #select
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.