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下拉框美化相關的資料

友情鏈接