> 웹 프론트엔드 > CSS 튜토리얼 > Firefox에서 선택 드롭다운 화살표를 올바르게 숨기는 방법은 무엇입니까?

Firefox에서 선택 드롭다운 화살표를 올바르게 숨기는 방법은 무엇입니까?

Patricia Arquette
풀어 주다: 2024-11-03 16:50:29
원래의
475명이 탐색했습니다.

How to Correctly Conceal the Select Dropdown Arrow in Firefox?

선택 드롭다운 화살표 숨김에 대한 "-moz-appearance" 수정

문제:

사용자 정의를 시도 중입니다. Chrome과 Firefox 모두에서 CSS를 사용하는 선택 요소의 드롭다운 화살표. "-webkit-" 구문은 Chrome/Safari에서 완벽하게 작동하지만 "-moz-" 대응 구문은 Firefox에서 드롭다운 화살표를 숨기지 않습니다. "-moz-외관: 없음;" 기본 화살표도 제거하지 못했습니다.

해결책:

드롭다운 화살표를 제거하는 올바른 "-moz-appearance" 값은 "-moz-입니다. 외관: 없음;." 그러나 이 속성은 "-moz-appearance: 버튼;"과 함께 사용됩니다. 이제 레거시 콘텐츠입니다. Firefox v35 이후 버전에서는 향상된 "모양" 속성을 지원하여 더 간단한 솔루션을 가능하게 합니다.

<code class="css">select {
  appearance: none;
}</code>
로그인 후 복사

대체 해킹(Firefox v35 이전):

Firefox v35 이전, 화살표를 숨기려면 CSS 해킹이 필요했습니다.

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

이 방법은 화살표를 약간 오른쪽으로 이동하여 오버플로로 인해 화살표가 제거됩니다.

업데이트:

  • 2014년 12월 11일: 이제 "-moz-appearance:none"이 Firefox v35에서 지원됩니다.
  • 2014년 4월 28일: 위에서 언급한 해킹은 Firefox 31.0.a1 Nightly에서 일시적으로 오작동했습니다. 그러나 문제가 해결되었습니다.

위 내용은 Firefox에서 선택 드롭다운 화살표를 올바르게 숨기는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿