利用文本框来制作，可以不影响给后台传数据。
<!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. python基础入门：matplotlib绘制多Ｙ轴画图（附源码）

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:屁屁酱 PS:如有需要Python学习资料的小伙伴可以加点击下方链接 ...

  2. Python 控制流代码混淆简介，加大别人分析你代码逻辑和流程难度

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 王平 PS:如有需要Python学习资料的小伙伴可以加点击下方链接自 ...

  3. L7过拟合欠拟合及其解决方案

    1.涉及语句 import d2lzh1981 as d2l 数据1 : d2lzh1981 链接:https://pan.baidu.com/s/1LyaZ84Q4M75GLOO-ZPvPoA 提取 ...

  4. C++学习--编译优化

    常量折叠 把常量表达式的值求出来作为常量嵌在最终生成的代码中. 疑问:对于一个很复杂的常量表达式,编译器会算出结果再编译吗?亦或者是把这个表达式完全翻译成机器码,最终留给程序去解决? 分情况: 涉及的 ...

  5. MyBatis model、xml、mapper 自动生成，附源码

    Mybatis 代码自动生成 model.xml.mapper 代码结构图 代码地址 https://github.com/shootercheng/codegen 需要修改的地方见 readme

  6. pytorch seq2seq闲聊机器人

    cut_sentence.py """ 实现句子的分词 注意点: 1. 实现单个字分词 2. 实现按照词语分词 2.1 加载词典 3. 使用停用词 "" ...

  7. 轻量级mysql安装教程-避免采坑

    1:安装包获取 安装了很多次,来来回回踩,踩出了一片光明大道,简单好用. 百度网盘获取:链接:https://pan.baidu.com/s/13frFBTODaMeADZOHj5KdJQ 提取码:a ...

  8. liunx常用知识基本命令大全

    liunx基础命令使用 标签(空格分隔):liunx常用命令 网络配置 虚拟网卡的绝对路径 /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0 ...

  9. Jmeter:运行报：Error occurred starting thread group :线程组, error message:Invalid duration 0 set in Thread Group:线程组, see log file for more details

    最近在用jmeter做压测,上周五压测的脚本,今天早晨结束后. 点击同样的脚本,运行就报Error occurred starting thread group :线程组, error message ...

  10. [Batch 脚本] 批量生成文件夹

    @echo off echo start set time=30000 echo %time% for /l %%i in (1,1, %time%) do ( echo %%i% md " ...