用 datalist 或 select 实现下拉列表

1 浏览发布于 作者 zouyang留下评论分享按钮

一、使用 datalist 实现 input 下拉列表提示:

<input list="cars" />
<datalist id="cars">
    <option value="BMW">
    <option value="Ford">
    <option value="Volvo">
</datalist>

效果:点击输入框会弹出提示如下

二、使用 select 实现下拉列表

<select name="lanmu" id="sel">
    <option value="bc" selected="selected">编程</option>
    <option value="aq">安全</option>
    <option value="qy">前沿</option>
</select>

selected=”selected” 表示默认选中项。
value 是选中的菜单代表的值。
开启多选模式,就在 select 标签上加上属性 multiple:<select multiple>…</select> 此时按住 ctrl 就可以多选了

ps:

1)css技巧:

  /*将默认的select选择框样式清除,使用 css3 的 appearance 属性,它允许您使元素看上去像标准的用户界面元素。比如 appearance:button;*/
  select{
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
  }

  /*清除ie的默认选择框样式清除,隐藏下拉箭头*/
  select::-ms-expand { display: none; }

  /*Chrome和Firefox里面的边框是不一样,可以设置 border: none; 来统一*/

2)实现鼠标移入则打开菜单

select 在 js 中是没有自动展开的属性的,只能通过设置 select 标签的 size 属性来实现展开的效果,下例鼠标移入则会自动打开下拉菜单了:

    <select  onmouseover="this.size = this.length;" onmouseout="this.size = 1">
        <option value="--请选择--">选择</option>
        <option value="1">测试1</option>
        <option value="2">测试2</option>
        <option value="3">测试3</option>
    </select>

三、补充 details + summary,它也可以实现点击展示下拉的隐藏。

<details>
    <summary>HTML 5</summary>
    aaaaaaaaa..
</details>

效果:

鼠标点击后展示:

ps:
details、dialog都有一个open属性,可以让其打开状态

<dialog open>这是打开的对话窗口</dialog>

<details open>
    <summary>HTML 5</summary>
    aaaaaaaaa..
</details>

想要打赏,请点击这里

发表评论

电子邮件地址不会被公开。 必填项已用*标注