드롭 다운 목록에서 기본 화살표 아이콘을 제거하는 방법 (선택 요소)? 같습니다. <select style=”width:30px;-webkit-appearance: none;”>

HTML <select>요소 에서 드롭 다운 화살표를 제거하고 싶습니다 . 예를 들면 다음과 같습니다.

<select style="width:30px;-webkit-appearance: none;">
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    ...
</select>

Opera, Firefox 및 Internet Explorer에서 어떻게합니까?

여기에 이미지 설명을 입력하십시오

답변

해킹이나 오버플로가 필요 없습니다. IE의 드롭 다운 화살표에 대한 의사 요소가 있습니다.

select::-ms-expand {
    display: none;
}

답변

앞에서 언급 한 솔루션은 크롬에서는 잘 작동하지만 Firefox에서는 작동하지 않습니다.

Chrome과 Firefox에서 모두 잘 작동 하는 솔루션 을 찾았습니다 (IE가 아님). SELECT 요소의 CSS에 다음 속성을 추가하고 필요에 따라 여백을 조정하십시오.

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

도움이 되었기를 바랍니다 🙂

답변

선택에서 드롭 다운 화살표를 제거하는 간단한 방법

select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

/* For IE10 */
select::-ms-expand {
  display: none;
}
<select>
  <option>2000</option>
  <option>2001</option>
  <option>2002</option>
</select>

스 니펫 확장

답변

이 시도 :

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 2px 30px 2px 2px;
    border: none;
}

JS 빈 : http://jsbin.com/aniyu4/2/edit

Internet Explorer를 사용하는 경우 :

select {
    overflow:hidden;
    width: 120%;
}

또는 Choosen을 사용할 수 있습니다 : http://harvesthq.github.io/chosen/

답변

이 시도:

HTML :

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

CSS :

.customselect {
    width: 70px;
    overflow: hidden;
}

.customselect select {
   width: 100px;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}

답변

이것을 시도해보십시오.

<style>
    select{
        border: 0 !important;  /*Removes border*/
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        text-overflow:'';
        text-indent: 0.01px; /* Removes default arrow from firefox*/
        text-overflow: "";  /*Removes default arrow from firefox*/
    }
    select::-ms-expand {
        display: none;
    }
    .select-wrapper
    {
        padding-left:0px;
        overflow:hidden;
    }
</style>

<div class="select-wrapper">
     <select> ... </select>
</div>

스 니펫 확장

숨길 수는 없지만 오버플로 숨김을 사용하면 실제로 숨길 수 있습니다.

답변

스레드를 완료하고 싶었습니다. 매우 확실하게 IE9에서는 작동하지 않지만 작은 CSS 트릭으로 수행 할 수 있습니다.

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

.customselect {
    width: 80px;
    overflow: hidden;
   border:1px solid;
}

.customselect select {
   width: 100px;
   border:none;
  -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}