드롭 다운 목록에서 기본 화살표 아이콘을 제거하는 방법 (선택 요소)?

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;
}

IE의 Select Select 화살표에서 대답했듯이

클래스와 의사 클래스를 사용하려는 경우 :

.simple-control 당신의 CSS 클래스입니까

:disabled 의사 클래스입니다

select.simple-control:disabled{
         /*For FireFox*/
        -webkit-appearance: none;
        /*For Chrome*/
        -moz-appearance: none;
}

/*For IE10+*/
select:disabled.simple-control::-ms-expand {
        display: none;
}

select{
padding: 11px 50px 11px 10px;
background: rgba(255,255,255,1);
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #8ba2d4;

}

완전한 기능의 크로스 브라우저 지원으로는이 작업을 수행 할 수 없습니다.

50 픽셀의 div를 가져 와서 오른쪽에 원하는 드롭 다운 아이콘을 띄우십시오.

이제 해당 div 내에서 너비가 55 픽셀 인 select 태그를 추가하십시오 (컨테이너 너비보다 큰 것)

나는 당신이 원하는 것을 얻을 것이라고 생각합니다.

오른쪽에 드롭 아이콘이 필요하지 않은 경우 오른쪽에 이미지를 띄우는 것을 제외한 모든 단계를 수행하십시오. select 태그의 초점에 outline : 0을 설정하십시오. 그게 다야

일반적인 선택 드롭 다운을 HTML / CSS로 대체하는 DropKick.js라는 라이브러리가 있으므로 자바 스크립트로 완전히 스타일을 지정하고 제어 할 수 있습니다. http://dropkickjs.com/

모든 브라우저 및 모든 버전에서 작동합니다.

JS

jQuery(document).ready(function () {    
    var widthOfSelect = $("#first").width();
    widthOfSelect = widthOfSelect - 13;
    //alert(widthOfSelect);
    jQuery('#first').wrap("<div id='sss' style='width: "+widthOfSelect+"px; overflow: hidden; border-right: #000 1px solid;' width=20></div>");
});

HTML

<select class="first" id="first">
  <option>option1</option>
  <option>option2</option>
  <option>option3</option>
</select>