当前位置：移动技术网 > IT编程>开发语言>JavaScript > HTML里select的CSS样式的改变

HTML里select的CSS样式的改变

2019年07月31日 | 移动技术网IT编程 | 我要评论

本以为可以很简单的在css里像input那样的给解决，结果没想到试了一下才知道常规的css根本没法改变的select样式，css里怎么弄，select都仍然是默认的那三维的样式。于是在网上搜索了一下，才知道，原来这个select是不能用常规的方法来定义css样式的。要用特殊的方法来处理。相信有很多朋友在处理网页的时候都会遇到这个问题，于是找了一篇不错的文章转过来，希望对大家有帮助————

首先要告诉大家，如果你是用css的方法，除了箭头部分，其他都可以改变，这是很令人别扭的事，因为其他的样式改了，箭头部分改不了等于无用。
下面举个css改select的例子

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

如果你想彻底的改变select的样子，有一种方法是用htc，但它有个缺点就是除了ie内核的，其他的他不支持。
举个例子，下载地址如下：下载文件

第二种方法就是用js，这其实是模拟select的效果，代码如下：

<html> 
<head> 
<title>untitled document</title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
<style> 
.table1{background-color:white;font-family: courier new, courier;font-size:12px} 
.td_out{font-family: courier new, courier;font-size:12px;color:#000000;height:15px;border:1 solid #ffffff;} 
.td_over{font-family: courier new, courier;font-size:12px;cursor:default;background-color:#3366cc;border:1 solid #000000;color:#ffffff;height:15px} 
.slv{vertical-align:bottom;font-family: courier new, courier;font-size:12px;border-left-width:0;border-top-width:0;border-bottom-width:0;border-right:0 solid #000000;vertical-align:middle;height:18px;color:#000000;} 
.down{position:relative;left:-2px;font-size:11px;vertical-align:middle;width:16;height:16;color:#2050b0;background-color:#d0dff7;border:1 solid #9fa3ce;writing-mode:tb-rl;font-weight:bold; 
} 
.seldiv{ 
position:absolute;z-index:1000;overflow-x:hidden;border-left:1 solid #000000;border-bottom:1 solid #000000;border-right:1 solid #000000; 
scrollbar-face-color: #d0dff7; 
scrollbar-highlight-color: #d0dff7; 
scrollbar-shadow-color: #ffffff; 
scrollbar-3dlight-color: #ffffff; 
scrollbar-arrow-color: #ffffff; 
scrollbar-track-color: #ffffff; 
scrollbar-darkshadow-color: #d0dff7;} 
</style> 
 
</head> 
<body>

</body></html>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

<!doctype html public "-//w3c//dtd html 4.01 transitional//en"> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
<title></title> 
<style type="text/css"> 
 
</style> 
<style> 
body { 
scrollbar-face-color: #d80000; 
scrollbar-highlight-color: #0000fc; 
scrollbar-shadow-color: #24fc90; 
scrollbar-arrow-color: #fcfc48; 
scrollbar-track-color: #002400; 
scrollbar-darkshadow-color: #00b448; 
scrollbar-base-color: #fc0000 
} 
</style> 
 
<style type="text/css"> 
 
</style> 
</head> 
<body> 
<table width="98" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="98" nowrap=""> 
<input name="text1" type="text" size="10" class="n1" readonly="" value="请选择" onclick="turnit(bb)"><input name="submit" type="text" class="n2" value="" readonly="" onclick="turnit(bb)"> 
</td> 
</tr> 
<tr> 
<td id="bb" style="display:none"><div id="layer1" style="position:absolute; width:98px; height:100px; overflow: scroll; overflow-x:hidden; z-index: 1;" class="n1"> 
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="tb"> 
<tr> 
<td id="t1" onmouseover="over(this)" onmouseout="out(this)" onclick="sele(this)">选择1</td> 
</tr> 
<tr> 
<td id="t2" onmouseover="over(this)" onmouseout="out(this)" onclick="sele(this)">选择2</td> 
</tr> 
<tr> 
<td id="t3" onmouseover="over(this)" onmouseout="out(this)" onclick="sele(this)">选择3</td> 
</tr> 
</table> 
</div></td> 
</tr> 
</table> 
</body> 
</html>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

多线程爬取狗妈表情包

通过多线程爬取狗妈表情包import requestsimport jsonfrom jsonpath impo... [阅读全文]
Python：数据导出到Excel（使用xlwt）

写在前面：前端ajax调用导出方法，ajax无法导出问题原因：ajax是无法直接导出excel的，因为ajax的... [阅读全文]
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地

爬虫代码如下：运行需要本地开启mongo服务器端，安装有谷歌浏览器及selenium对应版本的驱动文件#codi... [阅读全文]
MongoDB基础操作

一、概述在MongoDB数据库里是存在有数据库的概念，但是没有模式（所有的信息都是按照文档保存的），保存数据的结... [阅读全文]
nodejs中mysql的用法

1、建立数据库连接：createConnection(Object)方法该方法接受一个对象作为参数，该对象有四个... [阅读全文]
Node.js 连接 MySQL

导言在我们学习后端（node）的过程中，要时常和数据库打交道，所以说我们打通node、MySQLJavaScri... [阅读全文]
Mysql trace命令介绍

trace作用：对SQL的跟踪，可以知道SQL是如何执行的，比EXPLAIN还要强大。注意点：开启trace工具... [阅读全文]
详解JavaScript作用域闭包

javascript闭包，是js开发工程师必须深入了解的知识。3月份自己曾撰写博客《javascript闭包》，博客中只是简单阐述了闭包的工作过程和列举了几个示... [阅读全文]
深入了解JavaScript词法作用域

javascript并不是传统的块级作用域，而是函数作用域！一、作用域 javascript引擎在代码执行前会对其进行编译，在这个过程中，像var a = 2... [阅读全文]
详解JavaScript自定义函数

一、定义方法：在javascript中必须用function关键字function funcname(arg1,arg2...){statements;retu... [阅读全文]

网友评论


验证码：

HTML里select的CSS样式的改变

2019年07月31日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论