定义select的边框颜色

具体步骤：
    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所示，仔细对比，可以发现有一些微小的差别。

图2.1.6.6 定义SELECT的边框效果一

图2.1.6.7 定义SELECT的边框效果二

特别说明

本例主要是clip属性和margint属性的应用，因为SELECT控件的特殊性，无法直接定义其边框样式，所以必须掌握本例所用的技巧。

赞 (0)

相关推荐

  • 定义select的边框颜色

    定义select的边框颜色

    具体步骤:     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</o

  • iOS UIAlertController中UITextField添加晃动效果与边框颜色详解

    iOS UIAlertController中UITextField添加晃动效果与边框颜色详解

    前言 大家都知道在iOS8中引入了UIAlertController,通过UIAlertController可以方便的添加文本框进行编辑,但是,在输入错误的内容时,如何对用户进行提醒就成了问题,因为UIAlertController中的所有UIAlertAction都会导致UIAlertController的消失.这里,我就描述两种提示的方法,分别是晃动文本框和修改边框的颜色.下面话不多说了,来一起看看详细的实现方法吧. 晃动UITextField 晃动UITextField其实就是对它添加一个

  • iOS应用开发中UIView添加边框颜色及设置圆角边框的方法

    UIView加边框及边框颜色 引用库: 复制代码 代码如下: #import <QuartzCore/QuartzCore.h> 使用: 复制代码 代码如下: //添加边框和提示         CGRect frameRect = CGRectMake(20, 90, self.window.frame.size.width-40, self.window.frame.size.height-180);         UIView   *frameView = [[UIView alloc

  • C#中改变DataGridView控件边框颜色的方法

    DataGridView是Visual Studio中一个最重要的数据控件.它可以应用在大多数场合,功能强大,使用灵活.本文要重点介绍一下,如果设置DataGridView的边框颜色. 比尔盖次说"Apple机上没有哪一个软件我是觉得应该是微软首创的",这说明盖次对微软软件功能强大的自信心.而乔布斯而说,微软的软件毫无艺术感可言!这说明什么,说明微软的东西--丑! 乔帮主不愧是乔帮主,真是入木三分,直中要害!是的,默认情况下的DataGridView,真是丑!尤其是那个黑色的边框,不是

  • JS实现网页背景颜色与select框中颜色同时变化的方法

    本文实例讲述了JS实现网页背景颜色与select框中颜色同时变化的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/

  • 鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例

    鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例

    示例的是项目中的遇到的,要做成的效果是点击该图片按钮,达到切换图片的效果: HTML代码如下: <input class="dBox3Ulimg" type="image" src="img/newselect.png"/> <input class="dBox3Ulimg" type="image" src="img/yesselect.png" style=&quo

  • C#通过重写Panel改变边框颜色与宽度的方法

    本文实例讲述了C#通过重写Panel改变边框颜色与宽度的方法.分享给大家供大家参考.具体实现方法如下: using System; using System.Collections.Generic; using System.Text; using System.Runtime.InteropServices; using System.ComponentModel; using System.Windows.Forms; using System.Drawing; namespace Imag

  • JavaScript实现自动变换表格边框颜色

    代码如下,保存到HTML文件也可以查看效果: <html> <head> <meta charset="utf-8"> <title>表格边框变换颜色代码</title> </head> <body> <table border="0" width="261" id="change_jb51_net" style="border

  • 通过js修改input、select默认字体颜色

    textarea默认字颜色以及获取焦点后的字的颜色,焦点获取后使默认消失 <textarea cols="50" rows="5" id="textarea" onfocus="if(value=='获取到元素焦点'){value='';document.getElementById('textarea').style.color='#000'}" onblur="if (value ==''){value='

  • VML应用实例大全

    <HTML xmlns:v> <HEAD> <META http-equiv="Content-Type" content="text/html; Charset=gb2312"> <META name="GENERATOR" content="网络程序员伴侣(Lshdic)2004"> <META name="GENERATORDOWNLOADADDRESS&q

随机推荐