Question

我一直在努力寻找样式选择下拉菜单的最佳方式，因为你真的根本无法找到使用其他表单元素（如单选按钮）重新创建简单版本的最佳方法检查。

我的问题是是否有人有更好的方法然后我或者知道一种解决方法来设计正常的方法，这就是我想出的：http://codepen.io/naniio/pen/RPGNGj

HTML：

<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>

CSS：

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;
}

JS：

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

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

样式选择下拉变通方法和替代方案？

0 个答案: