Javascript 样式选择下拉列表解决方案和备选方案？

我一直在试图找到最好的方式来设置选择下拉列表的样式，因为你根本不能，我一直在试图找到最好的方式来使用其他表单元素（如单选按钮/复选框）重新创建一个简单的版本

我的问题是，是否有人有比我更好的方法，或者知道一种变通方法来设计普通方法，这就是我想到的：

HTML:

JS:

---

有什么问题吗。我觉得这很好。@ketan好像很多代码都希望有更干净的方法？

<div class="container">
<form action="">
  <p>Radio buttons can be hidden by adding "hidden"</p>
  <input type="radio" id="item-1" name="item-1" value="drama">
  <input type="radio" id="item-2" name="item-1" value="humor" >
  <input type="radio" id="item-3" name="item-1" value="ecchi" >
  <input type="radio" id="item-4" name="item-1" value="magic" >


 <div class="select_box">
  <span id="select-op-btn" class="js-option">Select</span>
    <ul id="options" class="js-drop">
      <li><label for="item-1" class="js-option">Drama</label></li>
      <li><label for="item-2" class="js-option">Humor</label></li>
      <li><label for="item-3" class="js-option">Ecchi</label></li>
      <li><label for="item-4" class="js-option">Magic</label></li>
    </ul> 
 </div>
</form>

body{
  font-size:18px;
  line-height:20px;
  font-family: 'Open Sans', sans-serif;
}  

p{
  line-height:22px;
  color:#111111;
}

.container{
  width:500px;
  padding:15px;
  margin:50px auto;
}

#select-op-btn{
  border:1px solid #F2F2F2;
  display:block;  
  padding:5px;
  cursor:pointer;
  background-image:url('http://i.imgur.com/K5gtkay.png');
  background-repeat:no-repeat;
  background-position:right center;
}

.select_box{
  box-sizing: border-box;
  margin:30px 0;
}

ul#options{
  list-style-type:none;
  font-size:0px;
  border-color:#F2F2F2;
  border-style: solid;
  border-width: 0px 1px 1px 1px;
}


ul#options li label{
    font-size:18px;
  display:block;
  padding:5px;
}

ul#options li:hover{
  background:#F2F2F2;
}

.js-drop{
  display:none;
}

.js-option{
  display:inline-block;
}

label{
  cursor:pointer;
}

$('input').on('change', function() {
    $('#select-op-btn').html(this.checked ? this.value : '');
});

$('.js-option').on('click', function() {
  $( "#options" ).toggleClass( "js-drop" );
});