社区
CSS
帖子详情
怎样改变
箭头(按钮)的颜色
zhengtao
2006-04-06 08:41:21
怎样用css改变<select>标签控件右边按钮(箭头)的颜色
...全文
6387
8
打赏
收藏
怎样改变<select>箭头(按钮)的颜色
怎样用css改变标签控件右边按钮(箭头)的颜色
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
8 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
gaochao79
2006-04-07
打赏
举报
回复
自己造个假的
李世垚
2006-04-07
打赏
举报
回复
提供一个模拟select的函数
/*
文件说明
由于select 不会被挡住 在做菜单的时候会影响效果 本程序通过div模拟select 定义的时候参考下例
<span id="CUL" value="" onchange="alert(this.options[this.selectedIndex][2])" style="display:inline;width:130" height=20 text=""
options="[
['平台进口报关单','43','aaaa'],
['平台出口报关单','44','bbbb'],
['平台进口报关清单','45','ccccc'],
['平台出口报关清单','46','ddddd'],
['h883同步报关单','']
]"></span>
定义时的有用属性列表
style.width 宽度 如果定义了宽度 转化后的select将采用这个宽度 不定义宽度90
height 高度 如果不定义select将根据options的数量自动增长
options select内容 转化后将变成数组 可以通过 <obj>.options[<下标一>][<下标二>]访问,如<obj>.options[3][2]
onChange 或者 onchange 选择后执行这段代码 如果没有就不执行
转化后新增属性
value 选择后的value
text 选择后显示出来的内容
selectedIndex 第几项被选中了 从0开始 默认为0
其它
转化请调用函数ChangeToSelect(obj,defaultVal),其中defaultVal是默认选中的值 例如 ChangeToSelect(CUL);
在样式表里清定义如下样式
.selectDiv { border: 2px solid inset buttonface;}
.optionDiv { border:1px solid black;border-top:0px;position:absolute;visibility:hidden;}
.optionDiv div { font-size:11px;font-family:Tahoma;padding-left:8px;line-height:130%;cursor:default;width:100%;}
.defaultSelect { font-size:11px;font-family:Tahoma;text-align:center;border:1px solid white;cursor:default;width:77px;}
.defaultSelect2 { font-size:11px;font-family:Tahoma;text-align:center;border:1px solid white;cursor:default;}
.arrow { font-family:webdings;line-height:13px;border:2px outset buttonhighlight;background-color:#cccccc;width:15px;text-align:center;cursor:default;font-size:8px;}
开发者 李世尧 对 蓝色理性 http://www.blueidea.com/tech/web/2003/1327.asp 内容进行修改得到该文件
*/
function ChangeToSelect(obj,defaultVal){
var selectDiv = document.createElement("table");
obj.selectDiv=selectDiv;
obj.options=eval(obj.options);
selectDiv.style.width=obj.style.width;
var selectDivTR = selectDiv.insertRow();
obj.selectDivTR=selectDivTR;
var defaultValueTD = selectDivTR.insertCell();
obj.defaultValueTD=defaultValueTD;
var arrow = selectDivTR.insertCell();
arrow.style.color='black';
//arrow.width="17px";
obj.arrow=arrow;
with(obj.selectDiv)cellSpacing=0,cellPadding=0,border=0,className="selectDiv";
if (parseInt(obj.style.width+'')-parseInt(obj.style.width+'')==0)
with(obj.defaultValueTD)innerText = obj.options[0][0],className="defaultSelect2";
else
with(obj.defaultValueTD)innerText = obj.options[0][0],className="defaultSelect";
obj.value=obj.options[0][1];
obj.text=obj.options[0][0];
obj.selectedIndex=0;
with(obj.arrow)innerText=6,className="arrow";
obj.appendChild(selectDiv);
//外层Div
obj.optionDiv = document.createElement("div");
obj.optionDiv.flag="SELECT";
//设置下拉菜单选项的坐标和宽度
with(obj.optionDiv.style) {
var select = obj.selectDiv;
var xy = getSelectPosition(select);
pixelLeft = xy[0];
pixelTop = xy[1]+select.offsetHeight;
width = obj.selectDiv.offsetWidth;
obj.optionDiv.className = "optionDiv";
backgroundColor="white";
zIndex=999;
if(obj.height!=null)height=obj.height;
overflowX="hidden";
overflowY="auto";
}
//下拉菜单内容
obj.Options = new Array();
for (var i=0;i<obj.options.length;i++) {
obj.Options[i] = obj.optionDiv.appendChild(document.createElement("div"));
}
for (i=0;i<obj.Options.length;i++) {
obj.Options[i].innerText = obj.options[i][0];
obj.Options[i].Farther=obj;
obj.Options[i].index=i;
if (obj.options[i][1]==defaultVal){
obj.defaultValueTD.innerText=obj.options[i][0];
obj.selectedIndex=i;
obj.value=obj.options[i][1];
obj.text=obj.options[i][0];
}
}
obj.appendChild(obj.optionDiv);
/*事件*/
//禁止选择文本
obj.selectDiv.onselectstart = function() {return false;}
obj.optionDiv.onselectstart = function() {return false;}
//下拉菜单的箭头
obj.arrow.onmousedown = function() {
this.setCapture();
this.style.borderStyle="inset";
}
obj.arrow.onmouseup = function() {
this.style.borderStyle="outset";
this.releaseCapture();
}
obj.arrow.onclick = function() {
event.cancelBubble = true;
obj.optionDiv.style.visibility = obj.optionDiv.style.visibility=="visible"?"hidden":"visible";
}
document.onclick = function() {
var divs=document.all.tags("DIV");
for (var i=0;i<divs.length;i++){
if (divs[i].flag=="SELECT") divs[i].style.visibility="hidden";
}
}
obj.defaultValueTD.onclick = function() {
event.cancelBubble = true;
obj.optionDiv.style.visibility = obj.optionDiv.style.visibility=="visible"?"hidden":"visible";
}
//移动Option时的动态效果
for (i=0;i<obj.Options.length;i++) {
obj.Options[i].attachEvent("onmouseover",function(){moveWithOptions("highlight","white")});
obj.Options[i].attachEvent("onmouseout",function(){moveWithOptions("","")});
obj.Options[i].attachEvent("onmouseup",selectedText);
}
function moveWithOptions(bg,color) {
with(event.srcElement) {
style.backgroundColor = bg;
style.color = color;
}
}
}
function getSelectPosition(obj) {
var objLeft = obj.offsetLeft;
var objTop = obj.offsetTop;
var objParent = obj.offsetParent;
while (objParent.tagName != "BODY") {
objLeft += objParent.offsetLeft;
objTop += objParent.offsetTop;
objParent = objParent.offsetParent;
}
return([objLeft,objTop]);
}
function selectedText() {
var sel=event.srcElement.Farther;
sel.selectedIndex=event.srcElement.index;
sel.value=sel.options[sel.selectedIndex][1];
sel.text=sel.options[sel.selectedIndex][0];
with(event.srcElement) {
sel.defaultValueTD.innerText = innerText;
}
sel.optionDiv.style.visibility="hidden";
//with(sel.defaultValueTD.style)background="highlight",color="white";
var t="";
if (sel.onChange!=null)
t+=sel.onChange;
if (sel.onchange!=null)
t+=sel.onchange;
if (t!=''){
var cmd=(t).replace(/this/gi,"sel");
//document.execScrip(cmd,"javascript");
eval(cmd);
}
}// JavaScript Document
BlueDestiny
2006-04-07
打赏
举报
回复
1、可批量美化select控件。
2、可以有onchange句柄。
3、触发onchange的函数可带参数。
3、可以得到select的值。
4、可设置像select类似的滚动条(如大于或等于8个数目时出现滚动条)
5、可设置宽度和高度
API参考:
//首先生成一个simulateSelect的实例
//构造函数的第一个可选参数为触发onchange的函数,其它的为onchange函数的参数;
c = new simulateSelect(s1onchange, "never-online");
//设置select的CSS,第一个参数为控件的主要CSS、第二个为选中条目时的CSS、第三个为没有选中条目时的CSS
c.style("CtlSelect2", "selected2", "unselected2");
//设置select的宽度和高度;
c.width = 320;
c.height = 20;
//初始化参数为:select控件的ID,可以用逗号分离,进行批量转换;
c.init("s1,s2,s3");
下一版本
可修改combox
支持键盘操作
http://blog.csdn.net/bluedestiny/archive/2006/03/24/637275.aspx
zhengtao
2006-04-07
打赏
举报
回复
那按钮的颜色可以用css改变吗?(不是箭头的颜色)
chouchy
2006-04-06
打赏
举报
回复
改不了。
李睿_Lee
2006-04-06
打赏
举报
回复
这玩意只能造假了。
创造奇迹9999
2006-04-06
打赏
举报
回复
哦
meizz
2006-04-06
打赏
举报
回复
没辄,除了自己模拟select外。
有点像
select
下拉框的Button旋转
按钮
动画.rar
有点像
select
下拉框的Button旋转
按钮
动画,响应鼠标生成动画效果,当鼠标悬停于
按钮
时,
按钮
的上下边线翻转。
按钮
的
颜色
可以自定义,
按钮
中的
箭头
符号是调用字体生成,因此不要删除fonts文件夹下的文件。
【最新】 MFC 修改ComboBox的样式,下拉列表的背景色 +
按钮
样式
【最新】 MFC 修改ComboBox的样式,下拉列表的背景色 +
按钮
样式,工程使用的是VS2017
【自学html笔记】使用html创建表单<input>标签的使用
input标签,textarea标签创建文本输入区域,还有
select
配合option创建下拉式表单的使用方法
如何用css样式修改
select
下拉标签的默认
箭头
样式
当需求是不让用ui框架,而要手动修改一个
select
下拉列表的样式时… 像这样把图一改成图二: (图一): (图二): 代码如下:
select
{ /* 鼠标移上,变小手 */ cursor: pointer; padding: 0 10px; /* 清除默认的
箭头
样式 */ appearance: none; -moz-appearanc...
HTML常用标签及其用法总结
1、&amp;amp;amp;amp;amp;amp;amp;amp;lt; div&amp;amp;amp;amp;amp;amp;amp;amp;gt; 说起HTML的标签,不得不提起的就是&amp;amp;amp;amp;amp;amp;amp;amp;lt; div&amp;amp;amp;amp;amp;amp;amp;amp;gt;,
CSS
61,112
社区成员
60,730
社区内容
发帖
与我相关
我的任务
CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
复制链接
扫一扫
分享
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章