简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > CSS 튜토리얼 > 본문

Firefox의 요소에서 드롭다운 화살표를 제거하는 방법

Chrome 및 Safari가 -webkit-appearance: 버튼;을 사용하여 드롭다운 화살표를 성공적으로 숨겼음에도 불구하고, Firefox -moz-appearance 속성의 다른 구현으로 인해 문제가 발생합니다.

문제: 지속적인 기본 화살표

-moz-appearance: 버튼을 요소에 대해 -moz-appearance: none이 지원되지 않기 때문입니다.

해결책: CSS 해킹

Firefox에서 드롭다운 화살표를 숨기려면 CSS 속성 조합이 필요합니다.

<code class="css">select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}</code>
로그인 후 복사

-moz-appearance를 없음으로 설정 0.01px의 작은 텍스트 들여쓰기를 추가하면 화살표가 보기 밖으로 밀려납니다. text-overflow: ''는 남아 있는 오버플로 텍스트를 제거하여 화살표가 숨겨진 상태로 유지되도록 합니다.

업데이트:

2014년 12월 11일: -moz-appearance: 없음; 이제 Firefox 35에서 예상대로 작동하므로 해킹이 필요하지 않습니다.
2014년 4월 28일: 앞서 언급한 CSS 해킹은 일시적인 효과가 있었지만 이후 여러 플랫폼의 Firefox 31.0.a1 Nightly에서 다시 나타났습니다.

위 내용은 Firefox의