Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

dropdown 控件(并没有 JS)

  其实我不太会写 CSS,然而偶尔想证明一下自己会写 CSS 的话就需要装个 B。比如用无 JS 的方式实现一些奇奇怪怪的东西等。最近要用到一个 dropdown 控件,于是突然就想装一波 B,于是只用了 CSS + HTML 实现了一个,而且还是包在原生控件上的,支持 form 提交。
  其实思路还是没什么创新,就是使用 label 元素作为原生控件的点击区域,在 checked 伪类上把我需要的东西显示出来。dropdown 这东西其实就是一个单选控件,所以我使用了原生的 input[type=radio] 来做基本控件,这样提交表单后就可以直接在 URL 的 QueryString 中得到控件的 name 和 value 了(当然也可以 POST 提交)。
  dropdown 的实现难点在于既要显示已经选中的东西,又要提供一个菜单用于点击选择。我能想到的有两种实现思路,一种是所有元素平行放置,把菜单项使用绝对定位从常规流中拎出来,这样可以尽可能地避免冗余实现。但由于菜单项目没有自己的容器,坐标难以计算,会导致视觉上很难看。所以我使用了另一个方案,把 label 做为菜单项,用一个容器装起来再绝对定义。通过 for 属性与 input 建立对应关系,input 只负责控制选中项的可见性:
  下面是代码:
<!DOCTYPE html> <style> input { display: none; } input + span { display: none; } input:checked + span { display: inline-block; } dl { font-size: 14px; line-height: 1.5; margin: 0; display: inline-block; position: relative; cursor: default; } dt { border: 1px solid #ccc; border-radius: 6px; display: inline-block; padding: 4px 8px; } dt:after { content: '▲'; opacity: .6; font-size: 12px; display: inline-block; transition: transform 200ms ease; } dl:hover dt:after { transform: rotate(180deg); } dd { top: calc(100% - 1px); left: 0; margin: 0; box-sizing: border-box; position: absolute; border: 1px solid #ccc; border-radius: 6px; background: #f7f7f7; visibility: hidden; transform: translateY(-1em); opacity: 0; transition: visibility 200ms ease, opacity 200ms ease, transform 200ms ease; } dl:hover dd { transform: translateY(0); visibility: visible; opacity: 1; } label { cursor: pointer; display: block; margin: 4px 8px; white-space: nowrap; } label:hover { color: red; } button { display: inline-block; vertical-align: top; box-sizing: content-box; font-size: 14px; line-height: 1.5; padding: 4px 8px; border-radius: 6px; border: 1px solid #ddd; cursor: pointer; background: #e8e8e8; } button:hover { opacity: .7; } </style> <form> <dl> <dt> <input type="radio" id="a" value="a" name="xx" checked /><span>这是一个</span> <input type="radio" id="b" value="b" name="xx" /><span>没有用到 JS 的</span> <input type="radio" id="c" value="c" name="xx" /><span>dropdown 控件</span> <input type="radio" id="d" value="d" name="xx" /><span>真的只有 CSS 和 HTML 哦</span> <input type="radio" id="e" value="e" name="xx" /><span>而且还是个标准的表单控件</span> </dt> <dd> <label for="a">这是一个</label> <label for="b">没用到 JS 的</label> <label for="c">dropdown 控件</label> <label for="d">真的只有 CSS 和 HTML 哦</label> <label for="e">而且还是个标准的表单控件</label> </dt> </dl> <button>提交</button> </form>
网名:
3.80.32.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^