定义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的对话框详解与参数
Mar 08 Javascript
js 为label标签和div标签赋值的方法
Aug 08 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
js验证框架实现代码分享
May 18 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
vue实现分页组件
Jun 16 Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 Javascript
JavaScript实现京东放大镜效果
Dec 03 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
Aug 31 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
Session保存到数据库的php类分享
2011/10/24 PHP
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
Laravel学习教程之从入口到输出过程详解
2017/08/27 PHP
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
js 作用域和变量详解
2017/02/16 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
js实现登录与注册界面
2017/11/01 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
Vue函数式组件的应用实例详解
2019/08/30 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
python中二维阵列的变换实例
2014/10/09 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
python 模块导入问题汇总
2021/02/01 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
html5读取本地文件示例代码
2014/04/22 HTML / CSS
国外平面设计第一市场:99designs
2016/10/25 全球购物
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
英文版银行求职信
2013/10/09 职场文书
食堂员工工作职责
2013/12/18 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
授权收款委托书范本
2014/10/10 职场文书
西双版纳导游词
2015/02/03 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript
MySQL日期时间函数知识汇总
2022/03/17 MySQL