模拟select下拉框(简单粗暴又有效)

        基本的select标签下拉框,采用浏览器内置样式,不能更改,极其影响用户体验。故一般前端采用input-ul-li方式模拟select下拉框。

        废话不多说,上代码:




	
		
		
		
	

	

		
		
		
		
  • 孙逸
  • 张三
  • 李四
  • 王五
  • 二麻子
  • 小六子
  • 九儿
  • 巴迪
  • 九个
  • 四爷

        效果展示如下(聚焦选项是指针会变小手指):

模拟select下拉框(简单粗暴又有效)_第1张图片

        此类下拉框相比select来说,能自定义样式与事件,更加灵活美观。


你可能感兴趣的:(前端技术杂述)