安科网

JS+CSS实现下拉列表框美化效果（3款）

smilewgchao

smilewgchao

2019-04-29

关注 关注

本文实例讲述了JS+CSS实现美化的下拉列表框效果。分享给大家供大家参考。具体如下：

三款款经过JS+CSS美化的下拉列表，效果很不错，总有一款适合你，先看看运行效果图：

JS+CSS实现下拉列表框美化效果（3款）

效果查看 源码下载

具体代码如下：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
 @import url(css/select2css.css);
-->
</style>
<script type="text/javascript" src="js/select2css.js"></script>
</head>
<body>
<form id="form" name="form" method="post" action="">
 <br />
<div id="uboxstyle">
<h3 style="color:#6D93AB;font-size:14px;">U-Box Style</h3>
 <select name="language" id="language">
 <option value="English" selected="selected">Chinese</option>
 <option value="简体中文" >简体中文</option>
 <option value="Deutsch" >Deutsch</option>
 <option value="Espa?ol" >Espa?ol</option>
 <option value="Fran?ais" >Fran?ais</option>
 <option value="Italiano" >Italiano</option>
 <option value="Polski" >Polski</option>
 <option value="Português" >Português</option>
 <option value="Svenska" >Svenska</option>
 <option value="Türk?e" >Türk?e</option>
 <option value="Руccкий" >Руccкий</option>
 </select>
</div>
<br /><br />
<h3 style="color:#6D93AB;font-size:14px;">Mac Style</h3>
<div id="macstyle">
 <select name="language_mac" id="language_mac">
 <option value="English" selected="selected">Chinese</option>
 <option value="简体中文" >简体中文</option>
 <option value="Deutsch" >Deutsch</option>
 <option value="Espa?ol" >Espa?ol</option>
 <option value="Fran?ais" >Fran?ais</option>
 <option value="Italiano" >Italiano</option>
 <option value="Polski" >Polski</option>
 <option value="Português" >Português</option>
 <option value="Svenska" >Svenska</option>
 <option value="Türk?e" >Türk?e</option>
 <option value="Руccкий" >Руccкий</option>
 </select>
</div>
<br /><br />
<h3 style="color:#6D93AB;font-size:14px;">TM2008 Style</h3>
<div id="tm2008style">
 <select name="language_tm2008" id="language_tm2008">
 <option value="English">Chinese</option>
 <option value="简体中文" >简体中文</option>
 <option value="Deutsch" >Deutsch</option>
 <option value="Espa?ol" >Espa?ol</option>
 <option value="Fran?ais" >Fran?ais</option>
 <option value="Italiano" >Italiano</option>
 <option value="Polski" >Polski</option>
 <option value="Português" >Português</option>
 <option value="Svenska" >Svenska</option>
 <option value="Türk?e" >Türk?e</option>
 <option value="Руccкий" >Руccкий</option>
 </select>
</div>
</form>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

option css

smilewgchao

smilewgchao

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

net core webapi多版本控制与swagger（nswag）配置教程

首先希望webapi支持多版本，swagger针对不同的版本可进行交互。这种方式很直观，但如果原有项目没有使用多版本控制不建议用，可采用header的方式更为合理一些，增加多个 [ApiVersion]即可。但是两个相同的版本中Controller不能有相

SAMXIE 2020-11-04

ajax将数据遍历给select的option选项

<select name="type" id="typeId"> <option>请选择</option> </select>js：

李永毅 2020-06-21

Echart动效系列01——循环切换数据以实现图表的动态效果

[24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]. [23, 75, 12

xiaoxiaoCNDS 2020-06-04

MySQL 表数据的导入导出操作示例

本文实例讲述了MySQL 表数据的导入导出操作。分享给大家供大家参考，具体如下：。mysql> SELECT * FROM tablename INTO OUTFILE 'target_file' [option];FIELDS [OPTIONALL

CoderJiang 2020-04-22

python基础之ini文件操作

--sections()：读取配置文件中所有的section. --items：读取该section下的所有key-vaule，并以键值对形式输出。--get：读取指定section下面的option的值,值：127.0.0.1）。--add与set需调用

CloudXli 2020-04-20

Ajax实现--取值追加到页面

1.发送Ajax求情到后台；

Richardxx 2020-03-04

Linux用户组管理及文本处理

1，显示/etc目录下，以非字母开头，后面跟一个字母及其他任意长度任意字符的文件或目录find /etc/ -maxdepth 1 -regex ‘/etc/[^a-zA-Z][a-zA-Z].*‘。2,复制/etc目录下所有以p开头以非数字结尾的文件或

LonelyTraveler 2020-03-03

Scala函数式编程（五） 函数式的错误处理

在介绍scala的函数式的错误处理之前，我们要先来介绍一下其他情况下的错误处理方式。以java为例，常见的错误处理方式不外乎两种，一种是及时捕捉到异常，然后当场进行处理。更合理的处理，应该是让master接收到一个表示错误情况的消息，然后再决定接下来如何处

TheBigBlue 2020-02-20

CentOS 7安装DHCP服务

--挂载操作系统光盘-->. --删除系统自动yum源-->. --读取默认配置文件-->. --禁用DNS动态更新-->. 在主配置文件dhcpd.conf中，可以使用声明、参数、选项这三种类型的配置，各自的作用和表现形式如下所述

tianchaoshangguo 2020-02-19

openwrt 自定义DHCP

DHCP是广播服务，除非通过VLAN定义作用域，否则无法指定多个DHCP服务器对不同的客户端提供服务。家用DHCP自定义服务功能使用Dnsmasq服务来增强。思路是，给静态DHCP服务，给需要不同配置的的Host 打上TAG，相同TAG的主机单独配置dhc

xcznb 2020-02-13

jquery select 操作

很多时候，中括号的运用可以使得逻辑变得很简单。这里用到了冒号，掌握它的用法并举一反三也会让代码变得简洁。很多时候用到select的级联，即第二个select的值随着第一个select选中的值变化。这在jquery中是非常简单的。

momode 2012-08-27

JQuery 操作笔录 JS

var checkboxs =$; ///循环取出for{. //全选或反全选 $.each;<input onclick="dateChange()" type="text" value="&qu

mapdigit 2013-05-13

selenium规避网站监测

现在不少大网站有对selenium采取了监测机制。比如正常情况下我们用浏览器访问淘宝等网站的window.navigator.webdriver的值为undefined。而使用selenium访问则该值为true。只需要设置Chromedriver的启动参

云之高水之远 2020-01-10

jvm性能分析工具使用

-q 仅输出VM标识符，不包括class name,jar name,arguments in main method. -V 输出通过flag文件传递到JVM中的参数(.hotspotrc文件或-XX:Flags=所指定的文件。executable：产生

nangongyanya 2019-12-30

python configparser

print # [‘user‘, ‘connect‘, ‘mysql‘, ‘mysql_connect‘]. print # 1234 <class ‘int‘>. # 检查section或option是否存在, 返回bool值，若存在返回

sdwylry 2019-12-17

Linux上的文件管理类命令都有哪些，其常用的使用方法及其相关示例演示。

mkdir：创建目录格式：mkdir [OPTION]... DIRECTORY...　　-p：自动按需创建父目录　　　-m：创建目录时给定权限示例：mkdir -p /data/test/A/B --在/data目录下递归创建/test/A/B三个目录　

jackalwb 2019-12-08

小程序跨页面传递data数据的三种方法

A：1、可以使用url传递数据。例如在A页面中传递数据，需要注意的是，wx.switchTab中的url不能传参数。在B页面中接收数据，通过onLoad的option：Page2、可以使用本地缓存 示例： 在A页面将数据存入， 在B页面中使用wx.setS

nimeijian 2019-12-07

coding++：kafka问题：zookeeper is not a recognized option zookeeper参数不支持

– zookeeper is not a recognized option主要原因是Kafka 版本过高，命令不存在。

pfjia 2019-12-04

Ajax实现二级联动菜单

--第二个下拉菜单-->

mmywcoco 2019-11-27

asp.net core 3.0中使用swagger的方法与问题

上次更新了 asp.net core 3.0 简单的记录了一下 swagger 的使用，那个项目的 api 比较简单，都是匿名接口不涉及到认证以及 api 版本控制，最近把另外一个 api 项目升级到了 3.0，还是遇到了一些问题，这里单独写一篇文章介绍，

xyx 2019-10-20
smilewgchao

smilewgchao

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号