모바일 환경에서 select box 조작히는 방법

Question

안녕하세요. 신입 웹 개발자 입니다. 첫 사진은 웹 환경이고 두 번째는 모바일(안드로이드)입니다. 모바일은 selectbox가 안드로이드, ios 등 따로 제공하는 형태로 나오더라구요. 문제는 css로 selectbox가 조작이 안된다는 겁니다. 어떤 방법으로 조작할 수 있을까요??(글자색을 바꾸고 싶습니다.)(현재 두번째 사진은 잘 보시면 글자색이 검정이라 안보이는 상황입니다)

캐티 · Accepted Answer

문제가 있스빈다 ㅠ. 모바일 환경의 기본 컨트롤들은 시스템 내장 UI들이므로 오버레이로 뜨는 선택 창 이것은 고칠 수가 없스빈다.<select> - HTML: Hypertext Markup Language | MDN (mozilla.org)지원은 된다고 모두 나와 있는데 열었을 때 출력 방식은 조금씩 다르단 말이저. 모바일에서 잘 보여서 좋지만 별거 아닌 것도 오버레이 팝업을 띄우는 것이 많이 거슬리긴 하빈다.이 문제는 input의 type&#61;option 으로 label 로 감싼 선택 영역을 만들어서 썻스빈다. 그면 나머지 기본 레이아웃은 div 태그를 덕지덕지 넣어서 구현 해야하빈다. 이걸로 하는 이유는 키보드 방향키 입력에도 대응 하기 위함이빈다. 이렇게 하면 정말 나쁜 부분이 있는데 웹의 기본에서 많이 벗어난건 제껴 놓더라도 태그가 너무 많아져서 개발할 때 불편하게 되빈다. 무엇보다도 저런 식으로 구현된 ui는 페이지 소스 크기가 아주 커서 좋은 웹사이트를 만들 수 없스빈다.보기에 좋기만 하면 좋은 것이 아니엇쩌.할 수 있는 옵션은 select 태그를 그대로 쓰되 자바스크립트가 이 태그를 찾아서 치환 해주는 프레임워크든 라이브러리든 쓰는 편이 좋을 것 같스빈다. 위 말한 option 방식 대체 방법이 작업이 그렇게 쉬운 편도 아니고 뭐 많은 문제가 있는데 여튼 나쁘빈다.머 이정도 알아 놓고 현실적인 대안은 ui 프레임워크를 쓰는 것이겠스빈다.Select | Quasar FrameworkSelect · Bootstrap v5.2 (getbootstrap.com) 프레임워크는 많습니다만 줄을 끄어 놓은 것은 기본 컨트롤을 틀로 사용 하기 때문에 원하는 대로 안되게 생겨 먹었기 때문이빈다.

모바일 환경에서 select box 조작히는 방법

1개의 답변

#microsoft 목록