自定义下拉框控件（<select></select>）

最新推荐文章于 2021-06-04 15:34:34 发布

码生诗想

最新推荐文章于 2021-06-04 15:34:34 发布

阅读量452

点赞数

分类专栏： Web前端开发文章标签： html select 控件

Web前端开发专栏收录该内容

7 篇文章

订阅专栏

HTMl

<div id="parent">
  <select>
      <option>what</option>
      <option>the</option>
      <option>hell</option>
  </select>
</div>

CSS

#parent{
    background: url('http://ourjs.github.io/static/2015/arrow.png') right center no-repeat; 
   /* the width and the height of your image */
    width: 100px;
    height: 30px;
    overflow: hidden;
    border: solid 1px #ccc;
}

#parent select{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    background:transparent;
    border:none;
    padding-left:10px;
    width: 120px;
    height:100%;    
}