jquery는 자신만의 선택 사용자 정의 style_jquery를 만듭니다.

네이티브 셀렉트의 스타일이 다양한 브라우저, 특히 IE67에서는 균일하지 않기 때문에 스타일 제어를 PM이 직접 요청하면 꽤 번거롭습니다. 가장 좋은 방법은 사용자 정의 스타일을 사용하여 선택 효과를 시뮬레이션하는 것입니다. 사용자 정의 선택을 구현하기 위해 여기에 jquery 플러그인이 작성되었습니다. (많은 기본 선택 이벤트가 거세되었지만 가장 중요한 이벤트는 여전히 남아 있습니다.)
인용이 필요한 스타일:

 .self-select-wrapper{ 
 position: relative;
 display: inline-block;
 border: 1px solid #d0d0d0;
 width: 250px;
 height:40px;
 font-size: 14px;
}
 
div.self-select-wrapper{
 /*解决IE67 块级元素不支持display:inline-block*/
 *display:inline;
}
 
.self-select-wrapper .self-select-display{
 display: inline-block;
 cursor: pointer;
 width:100%;
 height:40px;
 background: -moz-linear-gradient(top, #fff, #eee);
 background: -o-linear-gradient(top,#fff, #eee);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#eee));
 filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#eeeeee);
}
 
.self-select-display .self-select-text{
 padding-left:10px;
 display: inline-block;
 line-height: 40px;
 width: 210px;
}
 
.self-select-display .self-select-arrow-down{
 height:0;
 width:0;
 overflow: hidden;
 font-size: 0;
 line-height: 0;
 display: inline-block;
 vertical-align: middle;
 border-color:#aaa transparent transparent transparent;
 border-style:solid dashed dashed dashed;
 border-width:7px;
}
 
.self-select-wrapper .self-select-ul{
 position: absolute;
 max-height:200px;
 _height:200px;
 border: 1px solid #ccc;
 background-color: #fff;
 top:41px;
 left:0px;
 overflow-y: auto;
 _overflow-y:auto !important;
 padding:0px;
 margin:0px;
 width: 100%;
 z-index:2014;
 display: none;
}
 
.self-select-wrapper .self-select-ul li{
 list-style: none;
}
 
.self-select-ul .self-select-option{
 line-height: 28px;
 cursor: pointer;
 display: block;
 padding-left:10px;
 text-decoration: none;
 color:#000;
}
 
.self-select-ul .self-select-option:hover,
.self-select-ul .current{
 background-color: #eee;
}

js 소스 코드:

/**
 * 解决自定义select自定义样式需求
 * select父级元素谨慎使用z-index
 */
(function($){
 var tpl = '<div class="self-select-wrapper">'+
  '<span class="self-select-display">'+
  '<span class="self-select-text"></span>'+
  '<i class="self-select-arrow-down"></i>'+
  '</span>'+
  '<ul class="self-select-ul"></ul>'+
 '</div>';
 
 $.fn.selfSelect = function(changeHandler){
 var name = $(this).attr('name');
 var $selects = $(this);
 
 function getSourceData($options) {
 var text = [];
 var value = [];
 $.each($options, function() {
 text.push($(this).html());
 value.push($(this).attr('value'));
 });
 return {
 text: text,
 value: value
 };
 }
 
 function buildTpl($selfSelect, $select) {
 var valueArr =[];
 var textArr = [];
 var optionTpl = '';
 var $options = $select.find('option');
 var sourceData = getSourceData($options);
 valueArr = sourceData.value;
 textArr = sourceData.text;
 $select.hide();
 $selfSelect.find('.self-select-text').html(textArr[0]);
 $.each(textArr, function(seq, text) {
 optionTpl += '<li><a class="self-select-option" href="#" value="'+valueArr[seq]+'">'+text+'</a></li>';
 });
 $selfSelect.find('.self-select-ul').html(optionTpl);
 }
 
 function initSelect() {
 //解决多个select问题
 $.each($selects, function(i, selectEl) {
 var $selfSelect;
 var guid = Math.floor(Math.random()*100);
 var $select = $(selectEl);
 var $parent = $select.parent();
 if(!$select.prev().hasClass('self-select-wrapper')) {
  $select.before(tpl);
  $select.prev().addClass('select-' + guid);
  $selfSelect = $parent.find('.select-' + guid);
 }else {
  $selfSelect = $select.prev();
 }
 buildTpl($selfSelect, $select);
 initEvent($selfSelect, $select)
 });
 }
 
 function initEvent($selfSelect, $select) {
 $selfSelect.find('.self-select-display').off('click').on('click', function() {
 var $selfSelects = $('body').find('.self-select-wrapper');
 var isCliked = $(this).hasClass('clicked');
 if(isCliked) {
  $(this).removeClass('clicked');
  $selfSelect.find('.self-select-ul').slideUp('fast');
 }else {
  $(this).addClass('clicked');
  $selfSelect.find('.self-select-ul').slideDown('fast');
 }
 //防止z-index覆盖问题
 $.each($selfSelects, function(i, selectEl) {
  $(selectEl).css('z-index', 0);
 });
 $selfSelect.css('z-index', 1);
 });
 
 $selfSelect.find('.self-select-option').on('mousedown', function() {
 var text = $(this).html();
 var value = $(this).attr('value');
 $(this).parents('ul').slideUp('fast');
 $selfSelect.find('.self-select-display').removeClass('clicked');
 $selfSelect.find('.self-select-text').html(text);
 $(this).addClass('current');
 $(this).parent().siblings().children().removeClass('current');
 //修改select的值，并触发change事件
 $select.val(value);
 $select.trigger('change', value);
 });
 
 $(document).on('mousedown', function(e) {
 if($(e.target).hasClass('self-select-ul') || $(e.target).parent().hasClass('self-select-display')) return;
 $selfSelect.find('.self-select-display').removeClass('clicked');
 $selfSelect.find('.self-select-ul').slideUp('fast');
 });
 
 $select.on('change', function(e, val) {
 changeHandler && changeHandler(val);
 });
 }
 
 initSelect();
 
 return this;
 };
}(jQuery));

사용 렌더링:

두 번째는 이전 시/도 연계 플러그인을 생성한 후 사용자 정의 선택을 호출하여 생성한 것입니다

맞춤 선택의 장점:

• 스타일은 완전히 제어 가능합니다
• IE 시리즈 브라우저와 호환
• 사용하기 쉬우며 기본 변경 이벤트 처리에 영향을 주지 않습니다
  

개발 중 발생한 문제:
1. 선형 그래디언트
IE에서 필터 사용: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#eeeeee); 자세한 내용은 아래 정보를 참조하세요. .
2.IE6 태그 호버 문제
IE6은 href 속성을 설정하지 않으며 :hover 스타일을 트리거하지 않습니다.
3.IE 67 블록 수준 요소 표시: 인라인 블록
4.z-index 수준 문제
활성 상태에서 사용자 정의 선택의 Z-색인 변경
5.css는 IE에서 아래쪽 삼각형, 투명도 문제를 구현합니다
투명한 부분의 스타일 값을 점선으로 설정합니다.
테두리 스타일:실선 파선 파선
유용하다고 생각되면 친구에게 추천할 수 있습니다. 편집자는 모든 사람과 함께 발전할 의향이 있습니다.

위는 jquery를 사용하여 선택 사용자 정의 스타일을 만드는 방법입니다.