jquery

이 작업을 수행하는 간단하고 알맞은 방법을 찾았습니다. 브라우저 간, 분해 가능하며 양식 게시물을 손상시키지 않습니다. 먼저 선택 상자의 불투명도를 0으로 설정하십시오.

.select {
    opacity : 0;
    width: 200px;
    height: 15px;
}

<select class='select'>
    <option value='foo'>bar</option>
</select>

이것은 당신이 여전히 그것을 클릭 할 수 있도록

그런 다음 선택 상자와 동일한 치수로 div를 만드십시오. div는 배경으로 선택 상자 아래에 있어야합니다. 이를 달성하려면 {position : absolute} 및 z-index를 사용하십시오.

.div {
    width: 200px;
    height: 15px;
    position: absolute;
    z-index: 0;
}

<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
    <option value='foo'>bar</option>
</select>

자바 스크립트로 div의 innerHTML을 업데이트하십시오. jQuery로 Easypeasy :

$('.select').click(function(event)) {
    $('.div').html($('.select option:selected').val());
}

그게 다야! 선택 상자 대신 div 스타일을 지정하십시오. 위의 코드를 테스트하지 않았으므로 아마도 조정해야 할 것입니다. 그러나 희망적으로 요점을 얻습니다.

이 솔루션이 {-webkit-appearance : none;}을 능가한다고 생각합니다. 브라우저가 가장해야 할 일은 양식 요소와의 상호 작용을 지시하는 것이지만 사이트 디자인을 깨뜨릴 때 처음에 페이지에 표시되는 방식은 아닙니다.

답변

$('select').yaselect();

<div class="yaselect-wrap">
  <div class="yaselect-current"><!-- current selection --></div>
</div>
<select class="yaselect-select" size="5">
  <!-- your option tags -->
</select>

select {
    background: red;
    border: 2px solid pink;
}