jquery实现select下拉箭头的样式修改_JavaScript

jquery实现select下拉箭头的样式修改
没有实现前样式为：
jquery实现select样式后为:
代码如下：
背景图片为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现select下拉箭头的样式修改</title>
<script type="text/javascript" src="http://ysw.l/templets/default/mestyle/js/jquery.min.js"></script>

</head>

<body>

<style type="text/css">
*{font-size:12px; padding:0px; margin:0px;}
.CRselectBox {
    background: url("../images/select_bg.jpg") no-repeat scroll right center #F7F7F7;
    cursor: pointer;
    display: inline-block;
    float: left;
    height: 23px;
    margin-left: 1px;
    position: relative;
    width: 75px;
}
.CRselectBoxHover {
    background: url("../images/select_bg.jpg") no-repeat scroll right center #F7F7F7;
}
.CRselectBox a.CRselectValue {
    color: #1296D3;
    display: block;
    overflow: hidden;
    padding-left: 8px;
    width: 58px;
}
.CRselectBoxOptions {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #E3E3E3;
    border-color: -moz-use-text-color #1296D3 #1296D3;
    border-right: 1px solid #1296D3;
    border-style: none solid solid;
    border-width: medium 1px 1px;
    display: none;
    list-style: none outside none;
    margin: 1px 0 0 -1px;
    overflow-y: auto;
    position: absolute;
    text-indent: 5px;
    width: 75px;
    z-index: 1000;
}
.CRselectBoxOptions a {
    background: none repeat scroll 0 0 #F3F3F3;
    color: #1296D3;
    display: block;
    height: 22px;
    line-height: 22px;
    overflow: hidden;
    padding-left: 4px;
}
.CRselectBoxOptions a:hover {
    background: none repeat scroll 0 0 #1296D3;
    color: #FFFFFF;
}
.CRselectBoxOptions a.selected {
    background: none repeat scroll 0 0 #1296D3;
    color: #FFFFFF;
}
.CRselectBox a {
    outline: medium none;
    text-decoration: none;
}
.CRselectBox a:focus {
    outline: medium none;
    text-decoration: none;
}

</style>

<select  id="selsct" name="selSort" style="width:54px; height:20px; border:0px; background:none; position:relative;">
    <option value="选择画种">选择画种</option>
    <option value="选择画种">国画</option>
    <option value="选择画种">油画</option>
    <option value="选择画种">版画</option>
    <option value="选择画种">雕塑</option>
    <option value="选择画种">书法</option>
    <option value="选择画种">摄影</option>
    <option value="选择画种">装置</option>
    <option value="选择画种">当代艺术</option>
    <option value="选择画种">多媒体</option>
    <option value="选择画种">写真</option>
    <option value="选择画种">抽象</option>
</select>

<script language="javascript">
/**
 *
 * Copyright (c) 20011 May(qq237720089)
 * Author: ywl
 * CreateTime: 2011/12/08
 * Copyright: ARTRON.NET
 */
/*--------------------------------------------------------------------------------------------------*/
var n=t=0,count;
$(function(){
 //加载修改select 样式
 $("#selsct").CRselectBox();
  count=$('.silder_list a').length;
 $('.silder_list a:not(:first-child)').hide();
  $('.silder_info').html($('.silder_list a:first-child').find('img').attr('alt'));
 $('.num li:first-child').addClass('cur');
  $('.silder_info').click(function(){ window.open($('.silder_list a:first-child').attr('href'),'_blank')});
   $('.num li').click(function(){
    var i=$('.num li').index(this);
    if(i>=count) return;
   n = i;
    $('.silder_info').html($('.silder_list a').eq(i).find('img').attr('alt'));
    $('.silder_info').unbind().click(function(){ window.open($('.silder_list a').eq(i).attr('href'),'_blank')});
    $('.silder_list a').filter(':visible').fadeOut(500).parent().children().eq(i).fadeIn(1000);
   $(this).addClass('cur').siblings().removeClass('cur');
  });
   t=setInterval('showAuto()',5000);
   $('.silder').hover(function(){ clearInterval(t);},function(){t=setInterval('showAuto()',5000);})
})

//更改selsect样式
jQuery.fn.CRselectBox = jQuery.fn.sBox = function(){
 var _self = this;
 /*构建结构*/
 var _parent = _self.parent();
 var wrapHtml = '<div class="CRselectBox"></div>';
 var $wrapHtml = $(wrapHtml).appendTo(_parent);
 var selectedOptionValue = _self.find("option:selected").attr("value");
 var selectedOptionTxt = _self.find("option:selected").text();
 var name = _self.attr("name");
 var id = _self.attr("id");
 var inputHtml = '<input type="hidden" value="'+selectedOptionValue+'" name="'+name+'" id="'+id+'"/>';
 $(inputHtml).appendTo($wrapHtml);
 var inputTxtHtml = '<input type="hidden" value="'+selectedOptionTxt+'" name="'+name+'_CRtext" id="'+id+'_CRtext"/>';
 $(inputTxtHtml).appendTo($wrapHtml);
 var aHtml = '<a class="CRselectValue" href="#">'+selectedOptionTxt+'</a>';
 $(aHtml).appendTo($wrapHtml);
 var ulHtml = '<ul class="CRselectBoxOptions"></ul>';
 var $ulHtml = $(ulHtml).appendTo($wrapHtml);
 var liHtml = "";
 _self.find("option").each(function(){
  if($(this).attr("selected")){
   liHtml += '<li class="CRselectBoxItem"><a href="#" class="selected" rel="'+$(this).attr("value")+'">'+$(this).text()+'</a></li>';
  }else{
   liHtml += '<li class="CRselectBoxItem"><a href="#" rel="'+$(this).attr("value")+'">'+$(this).text()+'</a></li>';
  }
 });
 $(liHtml).appendTo($ulHtml);
 /*添加效果*/
 $( $wrapHtml, _parent).hover(function(){
  $(this).addClass("CRselectBoxHover");
 },function(){
  $(this).removeClass("CRselectBoxHover");
 });
 $(".CRselectValue",$wrapHtml).click(function(){
  $(this).blur(); 
  $(".CRselectBoxOptions",$wrapHtml).show();
  return false;
 });
 $(".CRselectBoxItem a",$wrapHtml).click(function(){
  $(this).blur();
  var value = $(this).attr("rel");
  var txt = $(this).text();
  $("#"+id).val(value);
  $("#"+id+"_CRtext").val(txt);
  $(".CRselectValue",$wrapHtml).text(txt);
  $(".CRselectBoxItem a",$wrapHtml).removeClass("selected");
  $(this).addClass("selected");
  
  $(".CRselectBoxOptions",$wrapHtml).hide();
  return false;
 });
 $(".CRselectBoxItem a").mouseover(function(){
  $(this).removeClass("selected");
 });
 $(document).click(function(event){
  if( $(event.target).attr("class") != "CRselectBox" ){
   $(".CRselectBoxOptions",$wrapHtml).hide();
  }
 });
 _self.remove();
 return _self;
 
 
}


</script>

</body>
</html>
您必须 登录 才能发表评论！

您必须登录才能发表评论！
