HTML里select的CSS样式的改变

2016-02-19 11:43 25 1 收藏

下面图老师小编要跟大家分享HTML里select的CSS样式的改变，简单的过程中其实暗藏玄机，还是要细心学习，喜欢还请记得收藏哦！

【 tulaoshi.com - Web开发】

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

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

如果你想彻底的改变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>   <style> .select{border: 0 inset buttonface; width: 100; font: icon; cursor: default;} .selected{border: 0 inset buttonface; background: window; padding: 0; font: icon;} .selectTable{height: 100%; width: 100%;border: 2 inset buttonhighlight; background: buttonface;} .option{font: icon; padding: 1; padding-left: 3; padding-right: 3; width: 100%;} .dropDown{position: absolute; visibility: hidden; width: 100%;border: 1 solid windowtext; padding: 0;background: window;} .select .button{width: 16px; height: 5; font-family: webdings; padding: 0;font-size: 11px; border: 2 outset buttonhighlight;} </style>

<!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><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)>   选择1   选择2   选择3  </body> </html>

来源:https://www.tulaoshi.com/n/20160219/1598340.html

上一篇： log4j详细的常用配置说明介绍
下一篇： dsmain.exe进程是什么

看过《HTML里select的CSS样式的改变》的人还看了以下文章更多>>

JS对HTML标签select的操作

标签： Web开发

//设定那个选项被选中 select.options[i].selected=true select.value="value" select.selectedIndex = index; //创建新的Option对象 new Option(text,value) new option(text,value,defaultSelected,selected text:字符串，指定option对象的text属性(即option/option之间的文字) value:字符串，指定option对象的value属性 defaultSelected:布...

CSS技巧：清理无用的CSS样式

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

Dust-Me selectors Dust-Me是一个很有用也很好用的Firefox插件，它可以分析到你的页面中调用的所有CSS文件并分析那些在页面中没有被用到。支持本地和远程样式文件，包括使用link标签、?xml-stylesheet?处理指令、@import语句等方式引入的样式文件；(但是不支持页面中的style块和内联样式)支持IE条件注释中引入的样式文件；可以检查一个页面...

html:select 动态取得表内容

标签： Web开发

最近小妹在做一个人力资源管理系统，用的是SSH. 遇到一个问题，就是在添加员工信息(employee)的时候，部门是(下拉列表)形式，因此想将此下拉列表做成动态的，直接从部门表（department）中取得。我用的方法是： html:select property="deptid1" html:option value="请选择"请选择/html:option logic:iterate id="departmen...

如何改变CppWebBrowser的Html内容

标签： Web开发

void __fastcall TForm1::SetHtml( TCppWebBrowser *WebBrowser,AnsiString Html ) { IStream *Stream; HGLOBAL hHTMLText; IPersistStreamInit *psi; if( WebBrowser-Document == NULL ) return; hHTMLText = GlobalAlloc( GPTR, Html.Length() + 1 ); if( 0 == hHTMLText ) { ShowMessage( "Glob...

[css]简明教程在HTML中添加样式表的方法

标签： Html CSS布局 Div+CSS XHTML

CSS语句内嵌到HTML文档内的方法有四种。 1．最直接的方法是将CSS样式语句直接写在HTML的标识符（tag）里：＜Tag style=”properties”＞文字内容＜/tag＞举个例子：＜p style=”color: blue; font-size: 10pt”＞直接嵌入CSS语句＜/p＞代码说明：用大小为10pt的蓝色字体显示“直接嵌入CSS语句”。 ...

查看更多精彩>>