定义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的匿名函数小结
Dec 31 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
详解vue-cli3使用
Aug 14 Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
Dec 10 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中调用ASP.NET的WebService的代码
2011/04/22 PHP
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
详解webpack打包vue时提取css
2017/05/26 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
vue实现扫码功能
2020/01/17 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
Python使用cx_Oracle调用Oracle存储过程的方法示例
2017/10/07 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
把pandas转换int型为str型的方法
2019/01/29 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
python实现简单的学生管理系统
2021/02/22 Python
html5弹跳球示例代码
2013/07/23 HTML / CSS
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
赡养老人协议书
2014/04/21 职场文书
大学专科自荐信
2014/06/17 职场文书
教师节倡议书
2014/08/30 职场文书
农村党员对照检查材料
2014/09/24 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
公司行政管理制度范本
2015/08/05 职场文书