利用文本框来制作，可以不影响给后台传数据。
<!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. android29之UI控件的抽屉式实现方法之一(DrawerLayout和NavigationView)

    添加依赖 implementation 'com.google.android.material:material:1.2.0-alpha06' 在Layout中创建两个Xml布局文件,header. ...

  2. 如何从零开始学Python？会玩游戏就行，在玩的过程就能掌握编程

    现在学习编程的人很多,尤其是python编程,都列入高考了,而且因为人工智能时代的到来,编程也将是一门越来越重要的技能. 但是怎么从零开始学python比较好呢?其实,你会玩游戏就行. 从零基础开始教 ...

  3. 【Java】FlowControl 流程控制

    FlowControl 流程控制 什么是流程控制? 控制流程(也称为流程控制)是计算机运算领域的用语,意指在程序运行时,个别的指令(或是陈述.子程序)运行或求值的顺序. 不论是在声明式编程语言或是函数 ...

  4. Python数据可视化---pygal模块

    目录 pygal模块 安装pygal模块 pygal模块介绍 柱状图 单列柱状图 堆叠柱状图 横向柱状图 折线图 简单折线图 纵向折线图 堆叠折线图 饼状图 简单饼状图 多级饼状图 圆环图 半圆图 雷 ...

  5. Feature list, Standard and Test plan for BETA Release 12/22/2015

    ===================BETA RELEASE FEATRURE LIST==================== 1. Log in and account manager for ...

  6. Git敏捷开发--stash命令

    save 执行git stash,默认以commit info保存当前的stash信息 当在某个commit下,执行多次stash时,无法友好地区分每个stash的改动.save 命令可以清晰地标识每 ...

  7. cmd 文件/文件夹的一切操作

    dir // 列出目录下所有文件夹 rd dirname // 删除dirname文件夹(空文件夹) rd /s/q dirname // 删除dirname文件夹(非空)

  8. Linux提权-suid提权

    0x1 suid概念 通俗理解为其他用户执行这个程序是可以用该程序所有者/组的权限 0x2 suid提权 简单理解为,一个文件有s标志(权限中包含s),并且对应的是root权限,那么当运行这个程序时就 ...

  9. MVC-路由扩展-限制浏览器

    根据路由原理,MVC每次都会走获取路由上下文数据. 自定义Route 调用,以及完善其他代码 运行结果,当在谷浏览器执行时:

  10. TensorFlow1.0 线性回归

    import tensorflow as tf import numpy as np #create data x_data = np.random.rand(100).astype(np.float ...