利用文本框来制作，可以不影响给后台传数据。
<!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. Xor Path 牛客，HPU--C--LCA

    题解: 题目要求求出u和v两点在最短路径上的异或和.怎么确定最短路径呢?,就是U到LCA(u,v)的路径加上V到LCA(u,v).根据异或的性质,如k^a^a=k,即异或一个值两边等于原数值. 所以维 ...

  2. A - Number Sequence 哈希算法（例题）

    Given two sequences of numbers : a[1], a[2], ...... , a[N], and b[1], b[2], ...... , b[M] (1 <= M ...

  3. 机器学习常见面试题—支持向量机SVM

    前言 总结了2017年找实习时,在头条.腾讯.小米.搜狐.阿里等公司常见的机器学习面试题. 支持向量机SVM 关于min和max交换位置满足的 d* <= p* 的条件并不是KKT条件 Ans: ...

  4. 使用 selenium 实现谷歌以图搜图爬虫

    使用selenium实现谷歌以图搜图 实现思路 原理非常简单,就是利用selenium去操作浏览器,获取到想要的链接,然后进行图片的下载,和一般的爬虫无异. 用到的技术:multiprocessing ...

  5. 最全的 API 接口集合

    对于程序员来说,为自己的程序选择一些合适的API并不是那么简单,有时候还会把你搞得够呛,今天猿妹要和大家分享一个开源项目,这个项目汇集了各种开发的api,涵盖了音乐.新闻.书籍.日历等,无论你是从事W ...

  6. 免费 https 申请步骤，你必须知道

    不适用 https 加密的网站,基本上就等于在裸奔. 来,开始开始动手做 我的系统是 CentOS6 第一步:安装Certbot Certbot可以用于管理(申请.更新.配置.撤销和删除等)Let's ...

  7. 2019-2020-1 20199326《Linux内核原理与分析》第八周作业

    可执行程序工作原理## 编译链接的过程### 示例程序hello.c #include<stdio.h> void main() { printf("Hello world\n& ...

  8. python学习24之异常

    '''''''''1.低级错误:纯语法错误2.中级错误:代码存在隐性错误,逻辑缺陷3.高级错误:软件面对不确定性的异常错误''''''一.捕获异常1.基本异常捕获语句try: #异常捕捉语句的开始 代 ...

  9. c++中set 的用法

    1.关于set C++ STL 之所以得到广泛的赞誉,也被很多人使用,不只是提供了像vector, string, list等方便的容器,更重要的是STL封装了许多复杂的数据结构算法和大量常用数据结构 ...

  10. zabbix监控ftp

    [root@agent ~]# yum -y install vsftpd [root@agent ~]# systemctl start vsftpd[root@agent ~]# systemct ...