select随笔
粘贴下面代码
select 美化
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<style>
body,ul{
margin:0;
padding: 0;
background: #1D9669;
}
.content{
padding-top:5%;
}
.content .select-wrap{
width:300px;
height:40px;
font-size: 16px;
margin: 0 auto;
background: #fff;
position: relative;
}
.content .select-wrap:after{
content: '';
display: block;
width: 10px;
height: 10px;
border-left:1px #000 solid;
border-bottom:1px #000 solid;
transform: rotate(-45deg);
position: absolute;
top:11px;
right: 12px;
}
.content .select-wrap .title{
padding: 0 15px;
line-height:40px;
cursor: pointer;
}
.content .select-wrap ul{
list-style-type: none;
background-color: #fff;
width: 100%;
overflow-y: auto;
top:40px;
position: absolute;
left:0;
max-height: 0;
}
.content .select-wrap ul li{
padding: 0 15px;
line-height:40px;
cursor: pointer;
}
.content .select-wrap ul li:hover{
background-color: #e0e0e0;
}
.content .select-wrap .selected{
background: #39f;
color: #fff;
}
.content .open ul{
max-height: 250px;
}
.content .open:after{
transform: rotate(-225deg);
top:18px;
transition: all .3s ease-in;
}
</style>
<script>
$(function () {
$(".select-wrap").on("click",function () {
$(this).toggleClass("open");
}); var liItem = $(".select-wrap ul li");
liItem.on("click",function () {
var $this = $(this);
liItem.removeClass("selected");
$this.addClass("selected");
$(".title").text($this.text());
$(".selected").text($this.text()).attr("data-value",$this.attr("data-value"));
})
})
</script>
<body>
<div class="content">
<div class="select-wrap">
<p class="title">请选择</p>
<ul>
<li data-value="HTML">HTML</li>
<li data-value="CSS">CSS</li>
<li data-value="JS">JS</li>
<li data-value="PHP">PHP</li>
</ul>
</div>
</div> </body>
</html>
select随笔的更多相关文章
- 最全的ORACLE-SQL笔记
-- 首先,以超级管理员的身份登录oracle sqlplus sys/bjsxt as sysdba --然后,解除对scott用户的锁 alter user scott account unloc ...
- Matplotlib数据可视化（6）：饼图与箱线图
In [1]: from matplotlib import pyplot as plt import numpy as np import matplotlib as mpl mpl.rcParam ...
- jquery 获取和设置 checkbox radio 和 select option的值?
============== 获取和设置 checkbox radio 和 select的值? === val()函数, 其名字就表达了 它的意思: 他就是＝ value 的简写! val就是valu ...
- php随笔（一）
之前的开发一直用的都是Thinkphp框架,对原生的php很不了解,近日打算把以前的项目拿一个出来用原生php再重写一次,顺便再把TP框架拆开好好分析分析. 之前的android开发虽说对面向对象的思 ...
- MyBitis(iBitis)系列随笔之五：多表(一对多关联查询)
MyBitis(iBitis)系列随笔之一:MyBitis入门实例 MyBitis(iBitis)系列随笔之二:类型别名(typeAliases)与表-对象映射(ORM) MyBitis(iBitis ...
- SQL学习之SELECT子句顺序
下面来总计下之前的随笔中所说过的所有的SELECT子句的顺序. 子句 说明 是否必须使用 SELECT 要返回的列或者表达式 ...
- 开发随笔——NOT IN vs NOT EXISTS
原文:开发随笔--NOT IN vs NOT EXISTS 原文出处: http://blog.csdn.net/dba_huangzj/article/details/31374037 转载请引用 ...
- MongoDB入门系列（三）：查询（SELECT）
一.概述 mongodb是最接近关系型数据库的NOSQL数据库,它的存储方式非常的灵活:以至于你会将它看成是一个经过冗余过的关系型数据库的表,这也是Mongodb原子性的一个特征.由于没有关系型数据库 ...
- 关于Mybatis的一些随笔
Mapper.xml头文件 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http:/ ...
随机推荐
- 基于IFC的施工过程模拟程序（4D BIM）
- ann
转自 http://blog.csdn.net/yiluoyan/article/details/45308785 这篇文章接着之前的车牌识别,从输入的车图片中分割识别出车牌之后,将进行下一步:车牌号 ...
- Conda / Miniconda——软件包管理系统使用
conda是一个非常好的python包管理软件,但是它的Minicoda是一个非常好的生信软件包管理软件,更多conda介绍多google. Miniconda简直就是生信人的福音,尤其是像我这种传统 ...
- p2234&bzoj1588 营业额统计
传送门 题目 营业额统计 Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业情况. Tiger拿出了公司的账本,账本上记录了公司成立以来每天的营业额 ...
- Luogu 1445 樱花
BZOJ 2721 唔,太菜了弄不来. 先通分:得到 $\frac{x + y}{xy} = \frac{1}{n!}$ 两边乘一下 $(x + y)n! - xy = 0$ 两边加上$(n!)^2$ ...
- Entity Framework Tutorial Basics（33）：Spatial Data type support in Entity Framework 5.0
Spatial Data type support in Entity Framework 5.0 MS SQL Server 2008 introduced two spatial data typ ...
- 启动应用程序的Activty多种方式
启动应用程序的Activity总共有三种方式,如下: 1>通过包名得到将启动应用的入口Activity,然后给intent附上相应的属性即可. 示例代码 public static void s ...
- Spring MVC 简介
- wampserver2.5 在 Win7 64位下的相关配置备忘
发现运行和配置这个版本和之前的Wampserver有些差异,特此记录 1).wampserver2.5-Apache-2.4.9-Mysql-5.6.17-php5.5.12-64b,另外有可能需要安 ...
- U-Net: Convolutional Networks for Biomedical Image Segmentation（理解+github代码）
github代码:https://github.com/Chet1996/pytorch-UNet 0 - Abstract 这篇文章是生物学会议ICMICCAI2015的文章,主要针对的是生物影像进 ...