1. 利用文本框来制作，可以不影响给后台传数据。
    <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. *{margin:; padding:; border:;}
  6. body{font-family:"微软雅黑";}
  7. .in{width:150px; height:30px; cursor:pointer; position:relative;}
  8. .in .choose{width:120px; height:30px; line-height:30px; text-align:center; float:left; background:#ff9933; cursor:pointer;}
  9. .in b{width:30px; height:30px; float:left; position:relative; background:#cc6600;}
  10. .in b:after {content:""; width:; height:; border-width:10px; border-style:solid; border-color:#fff transparent transparent; position:absolute; right:5px; top:10px;}
  11.  
  12. .select{width:150px; height:150px; position:absolute; top:100%; display:none;}
  13. .select li{display:block; width:150px; height:30px; line-height:30px; text-align:center; color:#3333cc; cursor:pointer; letter-spacing:5px; background:#ffff33;}
  14. .select li:hover{background:#ff9933;}
  15.  
  16. .submit{width:80px; height:30px; margin-top:20px; border-radius:5px; background:-webkit-linear-gradient(top,#ffcc33,#ffff33); cursor:pointer; background:-moz-linear-gradient(top,#ffcc33,#ffff33); background:-ms-linear-gradient(top,#ffcc33,#ffff33); filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr="#ffffcc33",endcolorstr="#ffffff33");}
  17. .submit:active{background:-webkit-linear-gradient(top,#ffff33,#ffcc33); background:-moz-linear-gradient(top,#ffff33,#ffcc33); background:-ms-linear-gradient(top,#ffff33,#ffcc33); filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr="#ffffff33",endcolorstr="#ffffcc33");}
  18. </style>
  19. </head>
  20. <body>
  21. <form action="receive.php" method="get">
  22. <div class="in"><input type="text" id="choose" class="choose" name="choose" value="-----请选择-----" readonly="readonly" /><b></b>
  23. <ul class="select">
  24. <li>选择一</li>
  25. <li>选择二</li>
  26. <li>选择三</li>
  27. <li>选择四</li>
  28. <li>选择五</li>
  29. </ul>
  30. </div>
  31. <input type="submit" class="submit" value="提交" />
  32. </form>
  33. <script>
  34. var chose = document.getElementById('choose');
  35. var wrap = document.querySelector('.in');
  36. var sel = document.querySelector('.select');
  37. var lis = sel.getElementsByTagName('li');
  38. alert(lis.length);
  39. wrap.onmouseover = function(){
  40. sel.style.display = "block";
  41. }
  42. wrap.onmouseout = function(){
  43. sel.style.display = "none";
  44. }
  45. for(var i=0,l=lis.length; i<l; i++){
  46. lis[i].onclick = function(){
  47. chose.value = this.innerHTML;
  48. sel.style.display = "none";
  49. }
  50. }
  51.  
  52. </script>
  53. </body>
  54. </html>

利用css+js制作下拉列表的更多相关文章

  1. 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider

    前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...

  2. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...

  3. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...

  4. #3使用html+css+js制作网页 番外篇 制作接收php

    使用html+css+js制作网页 番外篇 制作接收php 本系列链接 基础 php语法 例子 本系列链接 #1使用html+css+js制作网站教程 准备 #2使用html+css+js制作网站教程 ...

  5. #3使用html+css+js制作网页 制作登录网页

    #3使用html+css+js制作网页 制作登录网页 本系列链接 2制作登录网页 2.1 准备 2.1.1 创建文件夹 2.1.2 创建主文件 2.2 html部分 2.2.1 网站信息 2.2.2 ...

  6. #2使用html+css+js制作网站教程 测试

    #2使用html+css+js制作网站教程 测试 本系列链接 1 测试 1.1 运行 1.2 审查 1.3 审查技巧 1.4 其他 引言: 编写完代码后就要上机测试代码,获得用户体验,筛选bug 笔者 ...

  7. #1使用html+css+js制作网站教程 准备

    #1使用html+css+js制作网站教程 准备 本系列链接 0 准备 0.1 IDE编辑软件 0.2 浏览器 0.3 基础概念 0.3.1 html 0.3.2 css 0.3.3 js 0.4 文 ...

  8. 利用pixi.js制作精灵动画

    CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生.国内开发者昵称为CSS精灵,通过一定的技术手段,让精灵动起来,我称其为精灵动画,那么目前有哪些实现方式 呢?下面让我们详细的聊聊 ...

  9. CSS & JS 制作滚动幻灯片

    ==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...

随机推荐

  1. 【Java】【常用类】 Arrays工具类 源码学习

    虽然在数组的随笔中有说过,但实际上应该仔细深入一下源码进行分析 源码没有想象中的高大上,代码终究还是写给人看的,可读性大于执行性 最小阵列排序:1 乘 2的13次方 =  8192 学识浅薄,暂时还不 ...

  2. 字符串的常用操作和方法（Python入门教程）

    字符串的常用操作 很好理解 字符串可以用 ' + ' 连接,或者乘一个常数重复输出字符串 字符串的索引操作 通过一对中括号可以找到字符串中的某个字符 可以通过正负数双向操作噢 用一个中括号来实现 为什 ...

  3. D - Fox And Two Dots DFS

    Fox Ciel is playing a mobile puzzle game called "Two Dots". The basic levels are played on ...

  4. TCP基础概念

    定义 传输控制协议(TCP,Transmission Control Protocol)是一种面向连接的.可靠的.基于字节流的传输层通信协议 特点 TCP是一种面向广域网的通信协议,目的是在跨越多个网 ...

  5. Python中关于第三方库的补充

    Python语言的强大之处在于它的开源.正是因为它的开源,产生了成百上千的第三方库,涵盖了计算机的几乎所有的方向.第三方库的安装也并不是特别的复杂,通过在cmd中使用pip命令可以安装几乎所有的库,但 ...

  6. [安全] Kali Linux安装TheFatRat

    一.解决访问国外网络的问题 由于字符敏感,以下所有vray的第二位都需要加上"2". 1.使用vray客户端 前提条件:拥有一个海外vray服务器提供socks5代理. 1)下载v ...

  7. thinkphp--多表查询

    我们可以将两个表连起来一起查询数据,我现在有两张表,一个是feedback表和member表,如图: 总目录: 上代码: $where = array(); $"; $Model = M(' ...

  8. 联想在S规则债券市场完成了里程碑式的新债券发行

    腾讯科技讯,香港,2020 年 4 月 24 日-联想集团(HKSE:992)(ADR:LNVGY)今日宣布,在S规则债券市场上成功发行了里程碑式的 6.5 亿美元债券. 这些债券吸引了全球大量固定收 ...

  9. 关于bash shell的理解

    Bash Shell 基本特性 1.命令选项参数的补全 补全选项,需要安装 bash-completion yum install -y bash-completion 2.快捷键 Ctrl + a ...

  10. 【ejabberd】安装XMPP服务器ejabberd（Ubuntu 12.04）

    ejabberd ejabberd is a free and open source instant messaging server written in Erlang/OTP. ejabberd ...