<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