js下拉框美化_如何更改select option 边框颜色和选中的颜色css优先js次之

① html下拉框 js 改变body背景色

<!版DOCTYPEHTML>
<html>
<head>
<title>yugi</title>
<metacharset=UTF-8/>
<styletype="text/css">
</style>
<scripttype="text/javascript">
	varchange=function(sel){
		权document.body.bgColor=sel.value;
	}
</script>
</head>
<body>
<selectonchange="change(this);">
	<optionvalue="">select</option>
	<optionvalue="red">red</option>
	<optionvalue="blue">blue</option>
	<optionvalue="green">green</option>
</select>
</body>
</html>

② 怎样用 CSS + JS 美化网页中的 select 下拉框

1、首先我们来看一下效果图，横向下拉菜单。

③ js怎么设置select的样式，边框和三角的颜色

select属于浏览器内置组件，标准CSS无法调整其样式。

你可以使用div来模拟select。

首先创建一个<div />来模拟下拉框。

<divclass="mySelect"></div>

然后在里面加上显示选中值的<div />和模拟三角的<div />以及下拉列表<ul />

<divclass="mySelect">
<divclass="mySelectValue"></div>
<divclass="mySelectDropdown"></div>
<ulclass="mySelectOptions"></ul>
</div>

你可以用CSS来设置自己喜欢的样式。

接下来就是用Javascript来控制模拟的下拉框了。（这里为了方便，使用了jQuery）

//创建临时DOM，内容为模拟的下拉框（其中省略的部分为上面写的html代码）
var$mySelect=$('<divclass="mySelect">...</div>');
//把原来select有的样式复制到模拟的下拉框上
$mySelect.attr('class',$('#select').attr('class'));
$mySelect.attr('style',$('#select').attr('style'));
//把原来select的选项复制到模拟的下拉框中
$('#selectoption').each(function(){
varvalue=$(this).attr('value'),
name=$(this).html();
$mySelect.find('.mySelectOptions').append('<liclass="mySelectOption"data-id="'+value+'">'+name+'</li>');
});
//在模拟下拉框中设置选中的值
$mySelect.find('.mySelectValue').html($('#selectoption:selected').html());
//隐藏原有的select
$('#select').hide();
//给模拟的下拉框绑定事件
$mySelect
.on('click',function(e){
//阻止点击事件向上冒泡
e.stopImmediatePropagation();
//反转下拉列表的显示
$('.mySelectOptions',this).toggle();
//给原有的select模拟点击事件
$('#select').trigger('click');
})
.on('click','.mySelectOption',function(e){
//阻止点击事件向上冒泡
e.stopImmediatePropagation();
//把选中的值显示到模拟的下拉框中
$mySelect.find('.mySelectValue').html($(this).html());
//隐藏下拉列表
$mySelect.find('.mySelectOptions').hide();
//把选中的值给到原来的select中
$('#select').val($(this).data('id'));
//给原来的select模拟change事件
$('#select').trigger('change');
});
//基本功能就到此了。其中可以缓存jQuery对象来优化，还能添加焦点事件，键盘事件等，按自己的需求慢慢修改吧。

④ 有没有人用过 jquery 美化下拉列表的插件 jQuery.SelectBox.js 有问题咨询

这是我以前写的分享给你！

<style type="text/css">
*{margin:0;padding:0;}
.icon_coms{border-width:6px;border-style:solid;border-color: #ccc #fff #fff #fff;}
.selectelement{cursor:pointer;display:inline-block;line-height:26px;padding:1px 20px 0 10px;border:1px solid #E1E8E5;position:relative;z-index:1;border-radius:4px; }
.selectelement span{white-space:nowrap;text-align:center;min-width:24px;max-width:128px;overflow:hidden;text-overflow:ellipsis;display: inline-block;background:#fff;}
.selectelement .showNav{background:#fff;display:none;border:2px solid #599EFE;position:absolute;left:-2px;top:26px;border-radius:0 4px 4px 4px;}
.selectelement ul{max-height: 260px;overflow-x:hidden;overflow-y:auto;}
.selectelement li{white-space:nowrap;height:26px;line-height:26px;padding:0 10px;cursor:pointer;}
.selectelement li:hover{background:#f0f0f0;}
.selectelement li.active{background:#599EFE;color:#fff;}
.selectelement .icon_coms{width:0;height:0;position:absolute;right:4px;top:11px;overflow:hidden;transition:all 0.15s ease-out;-moz-transition:all 0.15s ease-out;-webkit-transition:all 0.15s ease-out;-o-transition:all 0.15s ease-out;}
.selectelement_active{border-color:#599EFE;border-width:2px;border-radius:3px 3px 0 0;z-index:2;padding:0 19px 0 9px;border-bottom:0;}
.selectelement_active .showNav{display:block;}
.selectelement_active .icon_coms{border-color:#fff #fff #ccc #fff;border-color:#fff #fff #ccc #fff\9;top:3px;}
.selectelement .bg{overflow:hidden;height:2px;background:white;margin-top:-2px;}
</style>

<div class="selectelement" onclick="oSelect.init(event,this)">

<span>当前选项是什么么么</span>
<div class="showNav" onclick="oSelect.select_target(event,this);">
<div class="bg"></div>
<ul>
<li>栏栏栏栏栏栏栏栏栏</li>
<li>栏目1</li>
<li>栏目22222222222222222222</li>
<li>栏目33333333</li>
<li>栏目</li>
<li>栏</li>
<li>1</li>
<li>100</li>
</ul>
</div>
<b class="icon_coms"></b>
</div>

<script type="text/javascript" >

var oSelect ={

init:function(ev,that){
var ev = ev || event;
var oBg=getByClass(that,"bg")[0];

if(hasClass(that,"selectelement_active")){
removeClass(that,"selectelement_active");
}else{
addClass(that,"selectelement_active");
}

ev.cancelBubble=true;
oBg.style.width=that.offsetWidth-4+"px";
oSelect.oEl(that);
},
select_target:function( ev,that ){
var li = that.getElementsByTagName("li");
var oBg = that.getElementsByTagName("div")[0];
var ev = ev || window.event;
var oSpan = prev(that);
var target = ev.target || ev.srcElement;

if( target.nodeName.toLowerCase() == "li" ){
for(var i=0;i<li.length;i++){
li[i].className="";
}
oSpan.innerHTML=target.innerHTML.toString();
target.className="active";
removeClass(target.parentNode.parentNode,"selectelement_active");
}
oBg.style.width=that.parentNode.offsetWidth-4+"px";
ev.cancelBubble=true;
},
oEl:function(that){
document.onclick=function(){
removeClass(that,"selectelement_active");
}
}

}
//class
function getByClass( oParent,sClass ){

var oParents=oParent||document;

var aEle=oParents.getElementsByTagName("*");

var aResult=[];

var reg=new RegExp("\\b"+sClass+"\\b","i");

for(var i=0;i<aEle.length;i++){

if(reg.test(aEle[i].className)){

aResult.push(aEle[i]);
}
}
return aResult;
}
/*判断class是否存在*/
function hasClass( obj,sClass ){

var oDiv=null;

if( typeof(obj) == "object" ){

oDiv=obj;

} else if( obj.charAt(0)=="#" ){

oDiv=$$( obj.substring( 1 ));

}
var oClass=oDiv.className;

if(oClass){
if(oClass.indexOf( sClass )>0){
return true;
}else{
return false;
}
}else{
return false;
}

}
/*添加样式*/
function addClass( obj,sClass ){

var oDiv=null;

if( typeof( obj ) == "object" ){

oDiv=obj;

}else if( obj.charAt(0) == "#" ){
oDiv=$$( obj.substring(1) );
}
var oClass=oDiv.className;

if( oClass ){
if( oClass.indexOf(sClass)<0 ){
oDiv.className=oClass+" "+sClass;
}
}else{
oDiv.className=sClass;
}
}

/*移除当前class*/
function removeClass( obj,sClass ){
var oDiv=null;

if( typeof(obj) =="object" ){

oDiv=obj;

} else if(obj.charAt(0)=="#"){

oDiv=$$(obj.substring(1));
}
var oClass=oDiv.className;

if(oClass&&oClass.indexOf(sClass)>0){

oDiv.className=oClass.replace(sClass,"");

}
}
</script>

⑤ 怎样用CSS美化select的下拉按钮，和里面的箭头。不是边框也不是背景

先给select加个div容器,然后给div设置overflow:hidden,把div的宽度调节到刚好把select的箭头隐藏,然后给div价格想要的箭头图,设置版norepeat right,边框权的话用border属性试试

⑥ 怎样用 CSS + JS 美化网页中的 select 下拉框

这个可以换种方式实现，首先select的样式每个浏览器都有其默认的样式，需要先去除这些默认样式，其次，select里面的样式诸如箭头，下拉框等等的样式，这里提供一种思路，就是在select的外层添加一个div，对这个div元素设置样式，select元素则是没样式，从而达到一种掩眼法的效果，实现方式如下：

#selectStyle{
display:block;
margin:0auto;
overflow:hidden;
height:30px;
width:240px;
border-radius:0;
background:#535353url("箭头图片地址")rightcenterno-repeat;
background-size:auto80%;
color:#fff;
line-height:2;
/*如果不想加图片，
则可以设置一个自己的三角形样式，
如下的自定义方式，
见代码1*/
position:relative;
z-index:1;
}
/*代码1*/
#selectStyle:before{
position:absolute;
z-index:1;
top:50%;
right:10px;
margin-top:-2.5px;
display:block;
width:0;
height:0;
border-style:solid;
border-width:5px5px05px;
border-color:#;
content:"";
}
/*代码1*/
#selectStyle:after{
position:absolute;
z-index:1;
top:50%;
right:10px;
margin-top:-3.5px;
display:block;
width:0;
height:0;
border-style:solid;
border-width:5px5px05px;
border-color:#;
content:"";
}

以上就是自定义select样式的方法；

同时也可以完全不要select这个元素使用div+css来自定义一个跟select一样效果的下拉框（需要Javascript辅助）。

⑦ 如何将下拉列表控件（select）用CSS改变成圆角的样式

直接加
border-radius
-webkit-border-radius
-moz-border-radius

⑧ 如何更改select option 边框颜色和选中的颜色，css优先，js次之

受浏览器限制，select 标签的 option 不能添加自定义样式，只能显示浏览器默认的样式；默认展示内啥样就是啥样；即使加了容 css，由于浏览器不支持，仍然会渲染不出效果来；
如果要美化 select 的这个下拉选择功能；可以自定义使用 div + css 来模拟这个效果；

⑨ 怎样用cssselect下拉框的美化

用cssselect下拉框的美化
这个可以换种方式实现，首先select的样式每个浏览器都有其默认的样式，需要先去除这些默认样式，其次，select里面的样式诸如箭头，下拉框等等的样式，这里提供一种思路，就是在select的外层添加一个div，对这个div元素设置样式，select元素则是没样式，从而达到一种掩眼法的效果，实现方式如下：

<div id="selectStyle">
<select id="select">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
</select>
</div>

首先要去掉 #select 的默认样式：
/* 去掉默认样式，设置新的样式 */
#select{
display:block;
width:100%;
height:100%;
box-sizing:border-box;
background:none;
border:1px solid #222;
outline:none;
-webkit-appearance:none;
padding:0 5px;
line-height:inherit;
color:inherit;
cursor:default;
font-size:14px;
position:relative;
z-index:3;
}
#select option{
color:#222;
}
#select option:hover{
color:#fff;
}
#select option:checked{
background:#535353;
color:#fff;
}

然后在外层div#selectStyle设置自定义样式
#selectStyle{
display:block;
margin:0 auto;
overflow:hidden;
height:30px;
width:240px;
border-radius:0;
background:#535353 url("箭头图片地址") right center no-repeat;
background-size:auto 80%;
color:#fff;
line-height:2;
/* 如果不想加图片，
则可以设置一个自己的三角形样式，
如下的自定义方式，
见代码1 */
position:relative;
z-index:1;
}
/* 代码1 */
#selectStyle:before{
position:absolute;
z-index:1;
top:50%;
right:10px;
margin-top:-2.5px;
display:block;
width:0;
height:0;
border-style:solid;
border-width:5px 5px 0 5px;
border-color:#fff transparent transparent transparent;
content:"";
}
/* 代码1 */
#selectStyle:after{
position:absolute;
z-index:1;
top:50%;
right:10px;
margin-top:-3.5px;
display:block;
width:0;
height:0;
border-style:solid;
border-width:5px 5px 0 5px;
border-color:#535353 transparent transparent transparent;
content:"";
}

以上就是自定义select样式的方法；
同时也可以完全不要select这个元素使用div+css来自定义一个跟select一样效果的下拉框（需要Javascript辅助）。

⑩ 用JS模拟select 改变样式

<section class="job-mole">
<dl class="retrie">
<dt>
<a id="area" href="javascript:;">分类 </a>
<a id="wage" href="javascript:;">月薪</a>
</dt>
<dd class="area">
<ul class="slide downlist">
<li><a href="#">不限</a></li>
<li><a href="#">销售</a></li>
<li><a href="#">会计</a></li>
<li><a href="#">文员</a></li>
<li><a href="#">程序</a></li>
<li><a href="#">金融</a></li>
</ul>
</dd>
<dd class="wage">
<ul class="slide downlist">
<li><a href="#">不限</a></li>
<li><a href="#">1500</a></li>
<li><a href="#">2000</a></li>
<li><a href="#">2500</a></li>
<li><a href="#">3000</a></li>
<li><a href="#">4000</a></li>
<li><a href="#">5000</a></li>
<li><a href="#">6000</a></li>
<li><a href="#">7000</a></li>
<li><a href="#">8000</a></li>
<li><a href="#">9000</a></li>
<li><a href="#">10000以上</a></li>
</ul>
</dd>
</dl>
</section>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('.retrie dt a').click(function(){
var $t=$(this);
if($t.hasClass('up')){
$(".retrie dt a").removeClass('up');
$('.downlist').hide();
$('.mask').hide();
}else{
$(".retrie dt a").removeClass('up');
$('.downlist').hide();
$t.addClass('up');
$('.downlist').eq($(".retrie dt a").index($(this)[0])).show();
$('.mask').show();
}
});
$(".area ul li a:contains('"+$('#area').text()+"')").addClass('selected');
$(".wage ul li a:contains('"+$('#wage').text()+"')").addClass('selected');
});
</script>

导航:首页 > 编程语言 > js下拉框美化

js下拉框美化

与js下拉框美化相关的资料

友情链接