定义select的边框颜色


Posted in Javascript onApril 28, 2008

 
具体步骤
    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控件的特殊性,无法直接定义其边框样式,所以必须掌握本例所用的技巧。
Javascript 相关文章推荐
JS动画效果代码3
Apr 03 Javascript
innerText和textContent对比及使用介绍
Feb 27 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
JS实现520 表白简单代码
May 21 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 Javascript
微信小程序实现左滑删除效果
Nov 18 Javascript
利用js实现简单开关灯代码
Nov 23 Javascript
JavaScript对象模型-执行模型
Apr 28 #Javascript
JavaScript面象对象设计
Apr 28 #Javascript
JS event使用方法详解
Apr 28 #Javascript
ext for eclipse插件安装方法
Apr 27 #Javascript
ext监听事件方法[初级篇]
Apr 27 #Javascript
js调用flash的效果代码
Apr 26 #Javascript
JS查看对象功能代码
Apr 25 #Javascript
You might like
zf框架的数据库追踪器使用示例
2014/03/13 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
PHP实现的购物车类实例
2015/06/17 PHP
php组合排序简单实现方法
2016/10/15 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
详解js中的几种常用设计模式
2020/07/16 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
python函数局部变量用法实例分析
2015/08/04 Python
Python实现的双色球生成功能示例
2017/12/18 Python
浅析Django中关于session的使用
2019/12/30 Python
Python-opencv 双线性插值实例
2020/01/17 Python
python 模拟登陆163邮箱
2020/12/15 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
工艺工程师岗位职责
2014/03/04 职场文书
淘宝活动总结范文
2014/06/26 职场文书
2014年少先队工作总结
2014/12/03 职场文书
劳模事迹材料范文
2014/12/24 职场文书
阿凡达观后感
2015/06/10 职场文书
小学教师见习总结
2015/06/23 职场文书
2016年寒假家长评语
2015/10/10 职场文书
Python经常使用的一些内置函数
2022/04/11 Python
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS