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

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

HTML에서 드롭다운 화살표를 제거합니다.<select>원소의예:

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

오페라, 파이어폭스, 인터넷 익스플로러에서 어떻게 합니까?

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

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

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

(IE가 아닌) Chrome과 Firefox 모두에서 잘 작동하는 솔루션을 찾았습니다.다음 속성을 SELECT 요소의 CSS에 추가하고 필요에 따라 마진 상단을 조정합니다.

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

<select>
  <option>one</option>
  <option>two</option>
  <option>three</option>

</select>

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

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 Bin : http://jsbin.com/aniyu4/2/edit

Internet Explorer를 사용하는 경우:

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

또는 Chosen: 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>

숨길 수는 없지만 숨겨진 오버플로를 사용하면 실제로 삭제할 수 있습니다.

제 경우(최신 Mozilla 버전 94.0.2),

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

작동하지 않지만 CSS를 확인한 후 해결책을 찾았습니다.

• 화살표가 포함되어 있습니다.background-image그래서 그냥 추가해서 해결했습니다.background-image: none;

모든 규칙 사용을 권장합니다.

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: none;
} 

그냥 스레드를 완성하고 싶었어요.매우 명확하게 말하자면, 이것은 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;
}

TailwindCSS를 사용하는 경우 다음을 활용할 수 있습니다.appearance-none학급.

<select class="appearance-none">
  <option>Yes</option>
  <option>No</option>
  <option>Maybe</option>
</select>

IE의 선택 화살표 제거에서 답변했듯이

클래스 및 유사 클래스를 사용하려는 경우:

.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픽셀의 너비를 가진 선택 태그를 추가합니다(용기 너비 이상).

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

오른쪽에 드롭 아이콘을 표시하지 않으려면 오른쪽에 이미지를 띄우는 것을 제외하고 모든 단계를 수행합니다.선택 태그에 대해 아웃라인:0을 포커스에 설정합니다.바로 그겁니다.

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

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

제이에스

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>

선택 html 태그에서 캐럿 아이콘을 숨기는 간단하고 쉬운 한 가지 방법은 없음과 없음으로 값을 CSS로 추가하는 것입니다.

select.without-icon {appearance:none;background-image:url('');}

<label>with Icon</label>
<select class="with-icon">
<option value="select" selected>Select</option>
<option value="Html Css">HTML CSS </option>
<option value="web development">Web Development</option>
<option value="Front End">Front End</option>
<option value="Programming">Programming</option>
</select>

<label>Without Icon</label>
<select class="without-icon">
<option value="select" selected>Select</option>
<option value="Html Css">HTML CSS </option>
<option value="web development">Web Development</option>
<option value="Front End">Front End</option>
<option value="Programming">Programming</option>
</select>

바로 이와 같이:

background-image:url('');

언급URL : https://stackoverflow.com/questions/16603979/how-to-remove-the-default-arrow-icon-from-a-dropdown-list-select-element