사용자 선택 드롭 다운

Question

선택/옵션 드롭 다운에서 CSS 만 사용하여 얼마나 할 수 있습니까? 내가 본 스타일화 된 드롭 다운 메뉴의 일종을 사용하는 모든 것을 위해 JS를 사용하고 있습니다.

누군가가 CSS (JS가 없음)만으로 만들어진 일부 드롭 다운 메뉴의 예/사이트에 대한 링크를 게시 할 수 있으면 좋을 것입니다. 고맙습니다.

Answer 1

select 컨트롤의 스타일을 지정할 때 항상 제한 될 것입니다. 페이지에서 렌더링되는 방식은 브라우저 소프트웨어가 컨트롤을 표시하는 방법에 따라 크게 달라집니다.

이것은 <input type="file" />과 유사합니다. 일부 브라우저는이 파일을 옆에 '찾아보기 ..'버튼이있는 텍스트 상자로 표시하며, 일부 브라우저는 찾아보기 버튼으로 표시되며 파일 이름 옆에 선택된 파일 이름이 표시됩니다.

스타일이 지정된 드롭 다운 목록을 원한다면 CSS 배치 div 등을 사용하여이 중 하나를 빌드하는 것이 좋습니다. 그러나 원하는 효과를 얻으려면 일부 자바 스크립트를 사용해야 할 것입니다. 당신이 볼 수 있듯이

http://danielneumann.com/blog/how-to-style-dropdown-with-css-only/

, 그들은 항상 다른 브라우저에서 약간 다를 : 여기

는 스타일 드롭 다운의 데모입니다.

Answer 2

CSS가 실제로 제한되어 있으므로 실제로는 다양한 브라우저에서 결과가 항상 동일하지는 않습니다.
모든 브라우저에서 작동하는 멋진 디자인을 선택하려면 자바 스크립트 만 사용해야합니다.