html select 样式t调整_select标签样式美化
js部分
var childCreate=false;
function Offset(e)
//取标签的绝对位置
{
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight-2;
while(e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetLeft;
}
return {
top : t,
left : l,
width : w,
height : h
}
}
function loadSelect(obj){
//第一步:取得Select所在的位置
var offset=Offset(obj);
//第二步:将真的select隐藏
obj.style.display="none";
//第三步:虚拟一个div出来代替select
var iDiv = document.createElement("div");
iDiv.id="selectof" + obj.name;
iDiv.style.position = "absolute";
iDiv.style.width=offset.width + "px";
iDiv.style.height=offset.height + "px";
iDiv.style.top=offset.top + "px";
iDiv.style.left=offset.left + "px";
iDiv.style.background="url(icon_select.png) no-repeat right";
iDiv.style.border="1px solid #cccccc";
iDiv.style.fontSize="12px";
iDiv.style.lineHeight=offset.height + "px";
iDiv.style.textIndent="4px";
document.body.appendChild(iDiv);
//第四步:将select中默认的选项显示出来
var tValue=obj.options[obj.selectedIndex].innerHTML;
iDiv.innerHTML=tValue;
//第五步:模拟鼠标点击
iDiv.οnmοuseοver=function(){//鼠标移到
iDiv.style.background="url(icon_select.png) no-repeat right";
}
iDiv.οnmοuseοut=function(){//鼠标移走
iDiv.style.background="url(icon_select.png) no-repeat right";
}
iDiv.οnclick=function(){//鼠标点击
if (document.getElementById("selectchild" + obj.name)){
//判断是否创建过div
if (childCreate){
//判断当前的下拉是不是打开状态,如果是打开的就关闭掉。是关闭的就打开。
document.getElementById("selectchild" + obj.name).style.display="none";
childCreate=false;
}else{
document.getElementById("selectchild" + obj.name).style.display="";
childCreate=true;
}
}else{
//初始一个div放在上一个div下边,当options的替身。
var cDiv = document.createElement("div");
cDiv.id="selectchild" + obj.name;
cDiv.style.position = "absolute";
cDiv.style.width=offset.width + "px";
cDiv.style.height=obj.options.length *20 + "px";
cDiv.style.top=(offset.top+offset.height+2) + "px";
cDiv.style.left=offset.left + "px";
cDiv.style.background="#f7f7f7";
cDiv.style.border="1px solid silver";
var uUl = document.createElement("ul");
uUl.id="uUlchild" + obj.name;
uUl.style.listStyle="none";
uUl.style.margin="0";
uUl.style.padding="0";
uUl.style.fontSize="12px";
cDiv.appendChild(uUl);
document.body.appendChild(cDiv);
childCreate=true;
for (var i=0;i
//将原始的select标签中的options添加到li中
var lLi=document.createElement("li");
lLi.id=obj.options[i].value;
lLi.style.textIndent="4px";
lLi.style.height="20px";
lLi.style.lineHeight="20px";
lLi.innerHTML=obj.options[i].innerHTML;
uUl.appendChild(lLi);
}
var liObj=document.getElementById("uUlchild" + obj.name).getElementsByTagName("li");
for (var j=0;j
//为li标签添加鼠标事件
liObj[j].οnmοuseοver=function(){
this.style.background="gray";
this.style.color="white";
}
liObj[j].οnmοuseοut=function(){
this.style.background="white";
this.style.color="black";
}
liObj[j].οnclick=function(){
//做两件事情,一是将用户选择的保存到原始select标签中,要不做的再好看表单递交后也获取不到select的值了。
obj.options.length=0;
obj.options[0]=new Option(this.innerHTML,this.id);
//同时我们把下拉的关闭掉。
document.getElementById("selectchild" + obj.name).style.display="none";
childCreate=false;
iDiv.innerHTML=this.innerHTML;
}
}
}
}
}
css部分
select{width:200px;height:30px;}
body部分
你最喜欢的运动是什么
你的高中班主任姓名
你的出生地是哪
loadSelect(document.form1.problem);
分类:
前端笔记
/
浏览量: 1666
2014-7-28 9:48 Monday
昵称
邮件地址 (选填)
个人主页 (选填)
评论内容
发表评论
send
html select 样式t调整_select标签样式美化相关推荐
- html select 样式t调整_用纯css改变下拉列表select框的默认样式
**社区评论 ( Beta版 )** #0 危汤讽 2015-04-02 09:57:05 firefox浏览器支持不好,貌似是浏览器bug 回复 #1 林甩土 2015-04-03 09:06:57 ...
- html select 样式t调整_css修改html select下拉框样式(含右边箭头)
css修改html select下拉框样式(含右边箭头)2017-10-12 16:51 我们经常会看到一些页用用的select下拉框非常漂亮,其实很多是用插件实现的. 如果不使用插件,靠纯css能不 ...
- option样式美化 css,CSS select样式优化
下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,就可以起到美化的作用了. 请选择您所在的城市 请选择您所在的城市 中山市 太原市 广州市 CSS样式 .sel_wrap{ height ...
- html美化select样式,select样式美化(简单实用)
美化select,可以实用一个a标签将select嵌套进去,然后将相对定位,在将select绝对定位,美化即可 .sel_mask{ /*将相对定位*/ position:relative; widt ...
- html下拉列表兼容性,下拉菜单select样式设置(兼容IE6/IE7/IE8/火狐)
复制代码代码如下: 兼容IE6/IE7/IE8/火狐---下拉菜单select样式设置 body {background-color:#6C6;} .select_border{ width:59px ...
- html select更改箭头样式,下拉列表-select样式css处理,可改变箭头的颜色
下拉列表-select样式css处理,可改变箭头的颜色 2018-11-26 css处理下拉列表 .IN {BORDER-RIGHT: #afaeae 1px solid; BORDER-TOP: # ...
- 26python编程实现PPT文档内容样式批量调整
文本框样式的调整 import os os.chdir("D:\\shiyan\\OFFICE\\5. PPT") from pptx import Presentation fr ...
- 仿苹果 html5 combox,模仿combox(select)控件,不用为美化select烦恼了。
模仿combox(select)控件,不用为美化select烦恼了. 来源:中文源码网 浏览: 次 日期:2018年9月2日 模仿combox(select)控件,不用为美化select烦 ...
- css样式美化 下拉框 select 样式
本文转载自: https://www.cnblogs.com/dazhangli/p/6428039.html 作者:dazhangli 转载请注明该声明. <span class=" ...
最新文章
- bzoj 4813: [Cqoi2017]小Q的棋盘【树形dp】
- 用Python进行时间序列分解和预测
- springboot配置spring.profiles.active多环境支持
- 查看UNIX系统版本
- 交换两个数字的三种方式
- 数据结构之字典序全排列
- mysql删库后恢复_记一次MySQL删库的数据恢复
- 用mplfinance库定制A股常用的K线、均线图
- 免费旅游项目html,HTML+CSS+JavaScript项目2 “说旅游”专题页制作_0518_连蕊.pptx
- Android对弹出输入法界面影响app界面布局
- java大师apple_起名大师下载-起名大师app下载 苹果版v8.01-PC6苹果网
- execute()方法
- 英文聊天常见地道简写
- 视频切片mp4格式转换m3u8
- 边境的悍匪—机器学习实战:第八章 降维
- 【小程序开发之制作首页】
- 实验四:app内页面跳转
- python 列表求最大值_Python找出列表中的最大数和最小数
- DOS命令-格式化磁盘
- 浪潮优派培训笔记:Tomcat服务器