定义select的边框颜色

2014-03-26  来源:本站原创  分类:表单特效  人气:7 

如何定义select的边框颜色 解决思路: 学习了clip和margin属性的用法,利用它们的特点,很容易就得出答案。

具体步骤:
1.用margin属性实现。先设置margin属性为-2,以隐藏select对象原来的边框,然后设置select对象的父对象的边框。

<span style="border:1px solid #333333;width:80">
<select style="margin:-2;width:84;background:#eeeeee">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</span>

2.margin属性结合clip属性实现。也是先用margin隐藏select的原边框,再用clip控制select的可视区域,以彻底隐藏select的原边框,最后通过定义select的父对象的边框作为最后看到的select的边框。

<span style="position:absolute;border:1px solid #333333;
width:80;height:20">
<select style="position:absolute;clip:rect(2 80 20 2);margin:-2;
width:84;background:#eeeeee">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</span>

注意:方法2中必须设置SPAN和SELECT元素的position属性为absolute。
特别提示
本例两段代码的运行效果分别如图2.1.6.6和图2.1.6.7所示,仔细对比,可以发现有一些微小的差别。
定义select的边框颜色

图2.1.6.6 定义SELECT的边框效果一
定义select的边框颜色

图2.1.6.7 定义SELECT的边框效果二

特别说明

本例主要是clip属性和margint属性的应用,因为SELECT控件的特殊性,无法直接定义其边框样式,所以必须掌握本例所用的技巧。

相关文章
  • 定义select的边框颜色 2014-03-26

    如何定义select的边框颜色 解决思路: 学习了clip和margin属性的用法,利用它们的特点,很容易就得出答案. 具体步骤: 1.用margin属性实现.先设置margin属性为-2,以隐藏select对象原来的边框,然后设置select对象的父对象的边框. <span style="border:1px solid #333333;width:80"> <select style="margin:-2;width:84;background:#eee

  • C#中改变DataGridView控件边框颜色的方法 2014-03-13

    这篇文章主要介绍了C#中改变DataGridView控件边框颜色的方法,默认的DataGridView边框颜色很丑,本文用编程方法实现修改DataGridView边框颜色,需要的朋友可以参考下 DataGridView是Visual Studio中一个最重要的数据控件.它可以应用在大多数场合,功能强大,使用灵活.本文要重点介绍一下,如果设置DataGridView的边框颜色. 比尔盖次说"Apple机上没有哪一个软件我是觉得应该是微软首创的",这说明盖次对微软软件功能强大的自信心.而乔

  • JS实现网页背景颜色与select框中颜色同时变化的方法 2014-07-03

    这篇文章主要介绍了JS实现网页背景颜色与select框中颜色同时变化的方法,实例分析了javascript操作select及css样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS实现网页背景颜色与select框中颜色同时变化的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

  • css3 边框颜色 2012-11-04

    使用CSS3的border-radius属性,如果你设置了border的宽度是X px,那么你就可以在这个border上使用X种颜色,每种颜色显示1px的宽度.如果说你的border的宽度是10个像素,但是只声明了5或6中颜色,那么最后一个颜色将被添加到剩下的宽度. 目前只有Firefox支持CSS3 border-colour属性,所以我们这里只需使用-moz前缀. #borderColor { border: 10px solid #dedede; -moz-border-bottom-co

  • 改变vim窗口边框颜色 2011-02-27

    第一行:垂直分割 第二行:状态栏 第三行:折叠 hi VertSplit guibg=#31312D guifg=#526A83 ctermfg=White ctermbg=Black term=none cterm=none gui=none hi StatusLineNC guibg=#31312D guifg=#526A83 ctermfg=White ctermbg=Black term=none cterm=none gui=none hi FoldColumn guibg=#3131

  • Android EditText获得焦点时边框颜色变深 2013-06-18

    第一步:为了更好的比较,准备两个一模一样的EditText(当Activity启动时,焦点会在第一个EditText上,如果你不希望这样只需要写一个高度和宽带为0的EditText即可避免,这里就不这么做了),代码如下: [html] view plain copy <EditText android:layout_width="fill_parent" android:layout_height="36dip" android:background=&quo

  • CSS样式表参数属性列表大全 2011-08-10

    属性名称 字体属性(Font) font-family font-style font-variant font-weight font-size 颜色和背景属性 Color Background-color Background-image Background-repeat Background-attachment Background-position 文本属性 Word-spacing Letter-spacing Text-decoration Vertical-align Text

  • javascript select 改变字的颜色 2014-07-19

    select变化字体颜色的代码. 请选择颜色 红色 蓝色 绿色 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 用css定义svg的样式和动画 2014-07-18

    CSS可以用来定义可缩放矢量图形的样式和动画,就像CSS定义HTML元素一样.在本文中,我会告诉大家一些用CSS定义SVG的前提条件和技术.(我最近在CSSconf EU和From the Front办了一个讲座,这篇文章是讲座的修正版) 同时我也会讲一下导出和优化SVG.嵌入SVG和每一个SVG如何影响它的样式和动画,然后我们再讨论用CSS定义SVG的样式和动画. 介绍 可缩放矢量图形(SVG)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式,它们支持交互行为和动画.换句话说

  • 表格边框的css语法 2013-12-08

    我们知道Dreamweaver在表格制作方面做得非常出色,但是在某些时候还是必须结合css才能达到一些特定效果,下面我们先把有关表格边框的css语法整理出来,然后另外介绍怎样用css美化表格的边框. 有关表格边框的css语法 具体内容包括:上边框宽度.右边框宽度.下边框宽度.左边框宽度.边框宽度.边框颜色.边框样式.上边框.下边框.左边框.右边框.边框.宽度.高度.有关标签等. 1.上边框宽度 语法: border-top-width: <值> 允许值: thin | medium | thi

  • CSS/XHTML边框样式的写法总结 2013-12-12

    本文出自:http://www.cssforest.org/blog/index.php?id=52 今天在群(CSS森林:30247792)里讨论了border的样式写法,发现border的写法还真是灵活,做了一下总结,希望对大家有用: border : border-width || border-style || border-color border是一个复合的属性,它可以同时定义上右下左四个边框,当四个边都是同个样式时可以使用,如: =================CSS======

  • 使用纯CSS实现圆角边框并完美兼容 2012-03-09

    纯CSS实现圆角框是一件大家都说烂了的事件,我也写过两篇总结文章,为什么还会有这篇文章呢,事情是这样的.在我们的以前的项目中,实现圆角框往往是用背景图片来实现的,但是,当这些项目发布上线后,在维护过程中,有时需要添加一些新的需求,因为以前的项目中大量采用了圆角图片,并且这些图片全部采用了CSS sprites方式合并的图,为了不增加更多的额外工作,并且也不想用JS来添加更多的http请求,所以需要一些简单的CSS方案来解决这个问题.而我的个人爱好,也喜欢采用无图片的方式来处理这些效果.总觉得CS

  • CSS2 样式表(属性·边框) 2012-03-09

    1.border 语法: border : border-width || border-style || border-color 取值: 该属性是复合属性.请参阅各参数对应的属性. 默认值为: medium none . border-color 的默认值将采用文本颜色. 说明: 设置对象的边框样式. 当你指定了边框颜色( border-color )和边框宽度( border-width )时,你必须同时指定边框样式( border-style ),否则边框不会被呈现. 如使用该复合属性定

  • 有关表格边框的css语法整理(1) 2013-12-31

    我们知道Dreamweaver在表格制作方面做得非常出色,但是在某些时候还是必须结合css才能达到一些特定效果,下面我们先把有关表格边框的css语法整理出来,然后另外介绍怎样用css美化表格的边框. 有关表格边框的css语法 具体内容包括:上边框宽度.右边框宽度.下边框宽度.左边框宽度.边框宽度.边框颜色.边框样式.上边框.下边框.左边框.右边框.边框.宽度.高度.有关标签等. 1.上边框宽度 语法: border-top-width: <值> 允许值: thin | medium | thi

  • DIV border边框显示不完全问题的解决方法 2014-07-27

    今天制作div下的li分两列显示发现,两边的边框无法完全显示,或显示断断续续的,或者拖动滚动条就出现边框的显示问题 第一次遇到这样的问题,就是定义div的边框有部分却显示不了.而在firefox里却是一切正常,该死的ie,太过分了. 代码也没有问题,查了好多资料,还百度了许多网站,在blueidea里也没有找到解决办法.后来在台湾的一个网站上发现了一个很几的解决办法: 如下: 左右两边的边框就是不显示,气不死你~~郁闷, css是: #divproject { margin-top: 5px;

  • table边框设置 2012-12-22

    table边框设置 2011-04-03 08:56:09| 分类: CSS | 标签:table 单线 边框 |字号 订阅 一.表格的常用属性 基本属性有:width(宽度).height(高度).border(边框值).cellspacing(表格的内宽,即表格与tr之间的间隔). cellpadding(表格内元素的间隔,即tr与tr之间的间隔).bordercolorlight(表格的亮边框颜色). bordercolordark(表格的暗边框颜色).bgcolor(表格的背景色).ba

  • ANDROID中的颜色 2014-03-23

    android中的颜色是由四个数字表示的,分别是alpha,red,green,blue(ARGB). 使用一种颜色,有三种方法. int color = Color.BLUE; int color = Color.argb(127, 255, 0, 255); 第三种方法,在xml中定义需要使用的颜色,根据颜色的name进行引用. /res/values/color.xml <?xml version="1.0" encoding="utf-8" ?>

  • ASPJPEG综合操作的CLASS类 2014-03-03

    <% 'ASPJPEG综合操作CLASS Class AspJpeg Dim AspJpeg_Obj,obj Private Img_MathPath_From,Img_MathPath_To,Img_Reduce_Size,CoverIf Private Img_Frame_Size,Img_Frame_Color,Img_Frame_Solid,Img_Frame_Width,Img_Frame_Height Private Img_Font_Content,Img_Font_Family,

  • 结合FSO操作和Aspjpeg组件写的Class 2015-03-07

    <结合FSO操作写的一个Class> 尚在完善中,基本功能已具备. 也可作为初学者的教程 程序代码 <% '***************************** CDS系统 FSO操作类 Beta1 ***************************** '调用方法: Set Obj=New FSOControl '所有路径必须为绝对路径,请采用Server.MapPath方法转换路径后再定义变量 '------ FileRun ------------------------

  • CSS在Internet Explorer 6, 7 和8中的差别 2015-01-28

    中文译文:CSS在Internet Explorer 6, 7 和8中的差别 英文原文:CSS Differences in Internet Explorer 6, 7 and 8 关于浏览器的最离奇的统计结果之一就是Internet Explorer 版本6,7和8共存.截至本文,Internet Explorer各个版本总共占据了大约65%的市场份额.在网站开发社区,这个数字要小很多,统计显示大概只有40%. 这些统计中比较有趣的部分是,IE6.IE7.IE8之间的数值很接近,这防止了单个