定义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 相关文章推荐
jQuery 性能优化指南(2)
May 21 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
JavaScript生成福利彩票双色球号码
May 15 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 Javascript
react系列从零开始_简单谈谈react
Jul 06 Javascript
Node.js 多进程处理CPU密集任务的实现
May 26 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
js加减乘除精确运算方法实例代码
Jan 17 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
中国收音机工业发展史
2021/03/02 无线电
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
专题组织生活会方案
2014/06/15 职场文书
免职证明样本
2014/10/23 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
大学体育课感想
2015/08/10 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
python 批量压缩图片的脚本
2021/06/02 Python
Python OpenCV形态学运算示例详解
2022/04/07 Python