모바일 미디어 쿼리 용 드롭 다운 목록 CSS 스타일링

Question

사이트 내 모바일 탐색을위한 드롭 다운 목록의 스타일을 지정하고 있는데 기본 아래쪽 화살표로 지루해 보입니다. 나는 내가 만든 그래픽에 기본 화살표를 어떻게 대치 시킬지 궁금해한다.

<select name="mobilenav" id="mobilenav" title="Select Destination"> 
<option selected>Select Destination</option> 
<option>Philadelphia</option> 
<option>United States of America</option> 
<option>Destination</option> 
<option>Long Destination Names</option> 
<option>Australia</option> 
</select> 

또한 그것을 테스트 및 휴대 기기를 이용하여 드롭을 탭하면, 팝업 메뉴리스트 대신 드롭 다운 메뉴를 생성한다.

미리 알려 주셔서 감사드립니다.

Answer 1

기본 선택 요소는 장치마다 다를 수 있으며 IOS는 Android와 다를 수 있습니다. http://gregfranko.com/jquery.selectBoxIt.js/과 같은 jQuery 플러그인을 사용하거나 기본 모양을 변경하려면 더 좋아하는 플러그인을 찾아야 할 수 있습니다. 모바일에서 작동하는지 100 % 확신하지는 않지만 데스크톱 브라우저에 더 많은 스타일 옵션을 제공해야합니다.

select 요소를 사용할 필요가없는 경우 정렬되지 않은 목록을 사용하고 원하는 스타일로 스타일을 지정하고 jQuery를 사용하여 클릭시 목록 항목을 확장하고 축소 할 수 있습니다. 이 경우 옵션이 있는지 확인하십시오.