select 사용자 정의 작은 삼각형 스타일 코드(실 용적 요약)

1849 단어 select삼각 양식
이 코드 는 인터넷 의 대부분 해결 방법 입 니 다.여기 서 정리 하 겠 습 니 다.
select 를 투명 하 게 하고 그 위 에 span 을 추가 하여 select 상 자 를 교체 합 니 다.작은 삼각형 스타일 을 사용자 정의 할 수도 있 고 select 텍스트 가운데 효 과 를 낼 수도 있 습 니 다.

    <div class="ui-select">
     <span>          <i class="icon-down lMar10"></i></span>
     <select name="" id="">
      <option value="10    ">10    </option>
      <option value="20    ">20    </option>
      <option value="30    ">30    </option>
      <option value="40    ">40    </option>
     </select>
    </div>

.ui-select{
 width:75%;
 height:63px;
 line-height:63px;
 background-color:#ECAFB4;
 color:#fff;
 padding:0 30px;
 text-align: left;
 position: relative;
}
select{
 width:100%;
 height:63px;
 line-height:33px;
 opacity: 0;
 position: absolute;
 top:0;
 left:0;
}

/*     */
.icon-down{
 display: inline-block;
 width:30px;
 height:16px;
 background: url("../image/newWap/wapIcons.png") -168px -96px no-repeat;
}


$(".ui-select select").change(function(){
  $(this).prev("span").html($(this).find("option:selected").val()+'<i class="icon-down lMar10"></i>');
})
//select  option     ,   span 
그림%1 개의 캡 션 을 편 집 했 습 니 다.

 이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 십시오.저희 에 대한 지지 에 감 사 드 립 니 다!

좋은 웹페이지 즐겨찾기