定义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 相关文章推荐
Javascript日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
javascript学习笔记(十一) 正则表达式介绍
Jun 20 Javascript
Asp.Net alert弹出提示信息的几种方法总结
Jan 29 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
如何动态加载外部Javascript文件
Dec 02 Javascript
js实现横向拖拽导航条功能
Feb 17 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 Javascript
javascript实现随机抽奖功能
Dec 30 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
php在项目中寻找代码的坏味道(综艺命名)
2012/07/19 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
2020/07/13 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式?
2016/01/12 面试题
个人应聘自我评价分享
2013/11/18 职场文书
追悼会主持词
2014/03/20 职场文书
保险内勤岗位职责
2014/04/05 职场文书
租房协议书怎么写
2014/04/10 职场文书
管理工程专业求职信
2014/08/10 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
2014年售票员工作总结
2014/11/19 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
街道社区活动报告
2015/02/05 职场文书
培根随笔读书笔记
2015/07/01 职场文书
小程序实现侧滑删除功能
2022/06/25 Javascript