利用文本框来制作，可以不影响给后台传数据。
<!DOCTYPE html>

<html>

<head>

<style>

*{margin:; padding:; border:;}

body{font-family:"微软雅黑";}

.in{width:150px; height:30px; cursor:pointer; position:relative;}

.in .choose{width:120px; height:30px; line-height:30px; text-align:center; float:left; background:#ff9933; cursor:pointer;}

.in b{width:30px; height:30px; float:left; position:relative; background:#cc6600;}

.in b:after {content:""; width:; height:; border-width:10px; border-style:solid; border-color:#fff transparent transparent; position:absolute; right:5px; top:10px;}

.select{width:150px; height:150px; position:absolute; top:100%; display:none;}

.select li{display:block; width:150px; height:30px; line-height:30px; text-align:center; color:#3333cc; cursor:pointer; letter-spacing:5px; background:#ffff33;}

.select li:hover{background:#ff9933;}

.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");}

.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");}

</style>

</head>

<body>

<form action="receive.php" method="get">

<div class="in"><input type="text" id="choose" class="choose" name="choose" value="-----请选择-----" readonly="readonly" /><b></b>

<ul class="select">

<li>选择一</li>

<li>选择二</li>

<li>选择三</li>

<li>选择四</li>

<li>选择五</li>

</ul>

</div>

<input type="submit" class="submit" value="提交" />

</form>

<script>

var chose = document.getElementById('choose');

var wrap = document.querySelector('.in');

var sel = document.querySelector('.select');

var lis = sel.getElementsByTagName('li');

alert(lis.length);

wrap.onmouseover = function(){

sel.style.display = "block";

}

wrap.onmouseout = function(){

sel.style.display = "none";

}

for(var i=0,l=lis.length; i<l; i++){

lis[i].onclick = function(){

chose.value = this.innerHTML;

sel.style.display = "none";

}

}

</script>

</body>

</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. 不使用 if-elif 语句，如何优雅地判断某个数字所属的等级？

    偶然看到了 stackoverflow 上的一个问题,还挺有启发,故分享一下. 题目大意是:有从 A 到 F 的 5 个等级,现要判断某个数值(从 0 到 1 之间)所属的等级.举例,如数值 > ...

  2. JVM 调优之 Eclipse 启动调优实战

    本文是我12年在学习<深入理解Java虚拟机:JVM高级特性与最佳实践>时,做的一个 JVM 简单调优实战笔记,版本都有些过时,不过调优思路和过程还是可以分享给大家参考的. 环境基础配置 ...

  3. Git应用详解第十讲：Git子库：submodule与subtree.md

    前言 前情提要:Git应用详解第九讲:Git cherry-pick与Git rebase 一个中大型项目往往会依赖几个模块,git提供了子库的概念.可以将这些子模块存放在不同的仓库中,通过submo ...

  4. Oracle NULL值

    NULL值,用来描述记录中没有定义内容的字段值.在Oracle中,判断某个条件的值时,返回值可能是TRUE.FALSE或UNKNOWN. 如果查询一个列的值是否等于20,而该列的值为NULL,那么就是 ...

  5. B - How many integers can you find 杭电1976

     Now you get a number N, and a M-integers set, you should find out how many integers which are small ...

  6. leetcode-0101 对称二叉树

    题目地址 https://leetcode-cn.com/problems/symmetric-tree/ 1.递归 本题最简单的思路是递归,可以假设两棵一模一样的树在进行镜像对比.他们之间的关系满足 ...

  7. tensorflow1.0 数据队列FIFOQueue的使用

    import tensorflow as tf #模拟一下同步先处理数据,然后才能取数据训练 #tensorflow当中,运行操作有依赖性 #1.首先定义队列 Q = tf.FIFOQueue(3,t ...

  8. C/C++，被誉为“最经典的编程语言”，不仅是因为编程入门需要学？

    计算机诞生初期,用机器语言或汇编语言编写程序; 第一种高级语言FORTRAN诞生于1954年; BASIC语言(1964)是由FORTRAN语言的简化而成的是为初学者设计的小型高级语言; C语言是19 ...

  9. git工具上传项目到码云

    首先,你需要在本地安装git客户端,此处简单易懂,略过然后,在本地建好文件夹,以本人为例,我的路径为 E:\git_project,此时需要通过鼠标右键选择:git bush here 如图所示然后会 ...

  10. js拼接php拼接

    当我们用到ajax的时候,局部替换的时候,我们可以在前台拼接,后台拼接,这个取决于你是前端后端这样拼接判断比较好, 判断不拼接,判断的值进行拼接  然后在html  替换 $.each 前台循环    ...