`

html定义select标签下拉框的边框颜色和滚动条样式【转】

阅读更多
解决思路:
Select下拉框的边框颜色和滚动条的样式都是无法直接定义的,但可以用层模拟出来。
具体步骤:

方法一:只定义下拉框边框样式。

<span style="position:absolute;border:1px solid #000000;width:80;height:20">
<select style="position:absolute;clip:rect(2 80 20 2);margin:-2;width:84;background:#eeeeee">
<option value="http://www.flash8.net">闪客之吧</option>
<option value="http://www.blueidea.com">蓝色理想</option>
<option value="http://www.5d.cn">5D多媒体</option>
<option value="http://www.csdn.net">CSDN</option>
<option value=" http://msdn.microsoft.com/">MSDN</option>
</select>
</span>

方法二:定义边框和滚动条样式(通过用层来模拟实现)。

<script>
function showHide(obj){     //隐现层的函数
sh={block:"none",none:"block"}
//层的display属性值在"block"和"none"间不断轮换,
//达到轮换隐藏和显示的效果
oOption.runtimeStyle.display=sh[oOption.currentStyle.display] }
</script>

<!--鼠标移上id为oOption的对象时执行本段代码-->
<script event="onmouseover" for="oOption">
obj=event.srcElement
if(obj.tagName=="TD"){//判断onmouseover事件是否发生在单元格上
//设置事件发生所在的单元格的背景颜色
   obj.style.backgroundColor="#dedede"
//设置事件发生所在的单元格的字体颜色
   obj.style.color="#FFFFFF"
}
</script>

<!--鼠标从id为oOption的对象上移开时执行本段代码-->
<script event="onmouseout" for="oOption">
obj=event.srcElement
if(obj.tagName=="TD"){        //判断onmouseout事件是否发生在单元格上
//设置事件发生所在的单元格的背景颜色
   obj.style.backgroundColor="#FFFFFF"
   obj.style.color="#000000"//设置事件发生所在的单元格的字体颜色
}
</script>

<!--id为oOption的对象被单击时执行本段代码-->
<script event="onclick" for="oOption">
obj=event.srcElement
if(obj.tagName=="TD"){ //判断onmouseover事件是否发生在单元格上
    showHide()        //隐藏层
//设置id为oSelect的对象内的文本为被点击的单元格内的文本
    oSelect.innerText=obj.innerText
//设置id为C_Select的对象内的值为被点击的
//单元格的自定义属性value的值
    C_Select.value=obj.value                      
    //window.open(obj.value)                  //测试跳转菜单功能
}
</script>
<style>
body,td{font-size:12px}
.over{color:#dedede}
.out{color:#333333}
#oOption{
scrollbar-face-color:#FFFFFF;
scrollbar-shadow-color:#C1C1BB;
scrollbar-highlight-color:#C1C1BB;
scrollbar-3dlight-color:#EBEBE4;
scrollbar-darkshadow-color:#EBEBE4;
scrollbar-track-color:#F4F4F0;
scrollbar-arrow-color:#CACAB7;
position:absolute;display:none;width:75px;height:80px;
overflow:scroll;overflow-x:hidden;
border:#333333 1px solid;border-top:none;cursor:default
}
</style>
<table width="75" border="0" cellspacing="0" cellpadding="0">
<tr><td>
<table width="100%" bordercolor="#666666" border=1 style="border-collapse:collapse;cursor:default" onclick="showHide()">
<tr>
<td align="center">
<input type="hidden" name="C_Select" id="C_Select">
<span id="oSelect">下拉选项</span></td><td align="center" width="14"><span style="font-family: Webdings;colro:#CACAB7" onmouseover="this.className=’over’" onmouseout="this.className=’out’">6</span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><div id="oOption" onselectstart="return false">
<table cellsapcing="0" cellspadding="3" border="0" width="100%">
<tr><td value="http://www.flash8.net">闪吧</td></tr>
<tr><td value="http://www.blueidea.com">经典</td></tr>
<tr><td value="http://www.5d.cn">5D</td></tr>
<tr><td value="http://www.sina.com">新浪</td></tr>
<tr><td value="http://www.sohu.cn">搜狐</td></tr>
<tr><td value="http://www.163.com">网易</td></tr>
<tr><td value="http://www.etang.com">亿唐</td></tr>
</table>
</div></td>
</tr>
</table>
注意:定义滚动条样式的效果需要IE5.5+的支持。
特别说明
方法一通过用CSS对象的clip属性设置下拉框的剪切范围,以隐藏下拉框的原边框,然后定义下拉框父元素的边框作为下拉框的边框;而方法二就完全摒弃原来的下拉框控件,用层来模拟一个,当然,要完全一样的效果是不可能的,只能是把一些很显明的特殊模拟出来。


文章出处:http://wsqwxf.blog.163.com/blog/static/2406800620113810434828/
分享到:
评论

相关推荐

    为select下拉框添加滚动条

    当下拉菜单选项比较多的时候,select下拉列表内容过多,在IE中默认是30条选项,firefox默认是20条, 超过自动出现滚动条,但是在没出现滚动条时候样式特别不协调。本次上传的代码将提供一种方法将select下拉框添加...

    select标签边框的颜色select标签边框的颜色

    由于浏览器原生的 `&lt;select&gt;` 标签样式难以自定义,许多开发者会使用 JavaScript 库(如 Select2、Chosen 或 Selectize)来模拟自定义的下拉菜单。这些库通过替换原生元素并创建新的 HTML 结构,提供了更丰富的...

    纯Css更改Select下拉框样式

    纯Css更改Select下拉框样式,显示框的样式更改,下拉列表的样式更改!纯干货,肯定是你需要的 纯Css更改Select下拉框样式,显示框的样式更改,下拉列表的样式更改!纯干货,肯定是你需要的 纯Css更改Select下拉框...

    一款非常好看下拉框样式(select)

    CSS则负责定义新的外观,包括但不限于颜色、大小、字体、边框、过渡效果等。由于IE特有的HTC行为,这些CSS样式和JavaScript代码被封装在`selectBox.htc` 文件中,通过CSS的`behavior`属性应用到`&lt;select&gt;`元素上。 ...

    动态加载select标签下拉框数据

    标题提到的“动态加载select标签下拉框数据”是指在用户交互时,根据需求动态地从服务器获取并填充HTML `&lt;select&gt;` 标签的选项,而不是一次性加载所有数据。这种技术常用于大数据量的下拉列表,以减少初始页面加载...

    好看的滚动条样式

    标题中的“好看的滚动条样式”指的是在网页设计中对浏览器默认滚动条进行美化和定制的一种技术。滚动条作为用户浏览长内容时不可或缺的交互元素,其样式和用户体验往往被开发者忽视,但通过自定义,可以提升网站的...

    select特色下拉框个性下拉框兼容所有浏览器

    通过设置`select`元素的`width`属性来调整下拉框的宽度,利用`font-size`来设定字体大小,以及使用`background-color`和`border`属性来改变背景色和边框样式。然而,由于浏览器之间的差异,某些CSS属性可能无法在...

    select多选下拉框美化

    对于select多选框,我们可以定义新的样式规则,覆盖原有的默认样式,例如改变边框、背景色、字体大小和颜色,甚至添加过渡和阴影效果。同时,可以使用伪类选择器(如`:hover`、`:focus`)来定义不同状态下的样式。 ...

    bootstrap-select 下拉框demo(含多种样式)

    bootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-...

    一款非常漂亮的表单select下拉框样式

    本篇将深入探讨如何创建一款非常漂亮的`select`下拉框样式,提升用户界面的美观度和用户体验。 传统的`select`下拉框样式往往单调且不吸引人,但在现代网页设计中,设计师们越来越注重细节,力求让每个元素都符合...

    jquery+html自定义select下拉框,下拉框美化

    1. **布局**:通过CSS调整下拉框的大小、位置、边框和背景颜色,使其与页面其他元素保持一致。 2. **字体和颜色**:改变文本的字体、字号、颜色和行高,以提高可读性。 3. **箭头图标**:替换默认的下拉箭头,可以...

    select 横向滚动条

    在IT行业中,"select 横向滚动条"是一个常见的前端开发话题,涉及到网页界面设计和用户体验优化。在网页设计中,下拉选择框(`&lt;select&gt;`元素)经常用于提供多个选项供用户选择。然而,当选项过多时,传统的垂直滚动...

    select完美下拉框

    在HTML中,原生的`&lt;select&gt;`标签虽然功能强大,但其样式往往较为单一,无法满足现代网页的美观需求。为了提升用户体验,开发者通常会使用JavaScript和HTML来创建自定义的下拉框,实现更丰富的视觉效果和交互功能。本...

    select 下拉框可以多选

    在网页设计和开发中,`select`元素是用于创建下拉菜单的标准HTML组件...在压缩包文件中的"select下拉框多选"示例,可能会包含一个实现这一功能的完整HTML页面、CSS样式表和可能的JavaScript脚本,供学习者参考和实践。

    html5 IOS下拉框样式

    iOS中的下拉框(选择器)具有半透明背景和较窄的边框,其视觉效果可能不符合设计师对整体界面风格的要求。本文将深入探讨如何自定义HTML5在iOS上的下拉框样式,使其更好地适应移动应用或网页设计。 首先,我们必须...

    layui多选下拉框样式,整套layui-select-multiple

    "layui-select-multiple"就是Layui专门为多选下拉框设计的一整套样式和功能。 首先,我们来看“layui多选下拉框样式”这一知识点。Layui的多选下拉框在视觉上非常整洁,其设计遵循了扁平化和简洁化的理念,与现代...

    select下拉框添加搜索功能

    在网页开发中,`select`下拉框是常见的用户交互元素,用于提供一系列选项供用户选择。然而,随着用户体验需求的提升,单纯的下拉选择已无法满足所有场景,特别是当选项众多时。为了提高用户的操作效率,我们常常需要...

    jQuery实现select下拉框样式美化效果

    本资源主要介绍如何使用jQuery来实现select下拉框的样式美化效果。 首先,我们需要引入jQuery库。jQuery的最新版本可以在官方网站(https://jquery.com/download/)下载,也可以通过CDN链接快速引入,如: ```html ...

    6种样式的下拉框

    为了满足个性化的界面设计需求,可能会提供高度可定制的下拉框,允许开发者调整颜色、字体、边框、背景等样式,使其与网站的整体设计保持一致。 项目名为“SimpleDropDownEffects-master”的压缩包很可能是包含...

    html多选下拉框 ,CheckBox的Select组件 可多选的下拉框

    在HTML中,创建一个可多选的下拉框通常涉及到`&lt;select&gt;`元素与`&lt;option&gt;`元素的组合,但为了实现多选功能,我们需要使用`&lt;input type="checkbox"&gt;`和自定义的JavaScript或者利用现代浏览器支持的Web组件技术。...

Global site tag (gtag.js) - Google Analytics