利用文本框来制作，可以不影响给后台传数据。
<!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. 动态规划_01背包_从Dijikstra和Floyd入手，彻底理解01背包

    dp一直是短板,现在从最基础的地方开始补 给定背包总容量 M ,n个商品选择,分别有价值vi,占量wi,从中取商品放入背包,令.容量和W=Σwi不超过M,令背包中的价值和V=Σvi最大 然后取法有很多 ...

  2. js多线程的实现

    我们都知道JS是一种单线程语言,即使是一些异步的事件也是在JS的主线程上运行的(具体是怎么运行的,可以看我另一篇博客JS代码运行机制).像setTimeout.ajax的异步请求,或者是dom元素的一 ...

  3. bypass安全狗测试学习

    搭建简单的sql注入环境 在test数据库中创建sqltest表,插入字段数据 编写存在注入的php文件 <?php $id = $_REQUEST['uid']; echo "您当前 ...

  4. [Abp vNext 入坑分享] - 3.简单的用户模块功能开发

    一.简要说明 本篇文章开始进行业务模块的开发模拟,借助user模块来进行业务开发,主要是用户相关的基础操作.主要是先使用Users来体验整个开发的流程.主要是先把一个基础流程跑顺利,在这里我并不会过于 ...

  5. 如何使用IE9浏览器自带开发人员工具捕获网页请求

    我们在通过浏览器访问一个网页的时候,有时候会遇到页面不能正常显示,图片不能正常加载的问题. 如果我们需要知道浏览器打开该网页时,网页中每个元素的加载情况.这时,我们便可以借助浏览器自带开发人员工具,来 ...

  6. phpstudy xdebug 配置

    来源:https://baijiahao.baidu.com/s?id=1607680791440431678&wfr=spider&for=pc https://www.cnblog ...

  7. SOCKET网络基础

  8. Ubuntu 安装 Qt， 安装辅助软件

    sudo apt-get install libgl1-mesa-dev libglu1-mesa-dev sudo apt-get install gcc g++ sudo apt-get inst ...

  9. Makefile 中引用多个 include 路径

    LIB=-L/usr/informix/lib/c++ INC=-I/usr/informix/incl/c++ -I/opt/informix/incl/public default: main m ...

  10. nCOV 数据简要分析 (0326)

    nCOV 数据简要分析 (0326) matlabdatacov 简介 碰巧看到了数据上传, 正在跑数据的我想着要不拟合一下看看, 然后, 就做了两个小时, 这里做一个简单的记录过程, 后续可能做在线 ...