스타일링 선택 옵션 모범 사례

Question

선택 드롭 다운 목록과 관련된 웹 페이지에서 작업하고 있습니다. 제 직업은 "기능적", 즉 올바른 내용을 표시하고 동시에 "합리적인 판단"을하는 것입니다. 웹 디자이너는 나중에 "모양과 느낌"을 연마 할 것입니다.

CSS를 사용하여 Html Select 요소를 스타일링하는 좋은 방법이 없다는 것이 당혹 스럽습니다. 내가 찾은 모든 프레임 워크/솔루션은 다음이 포함됩니다

• 원래 선택 요소

• 사용 <div> <span> 또는 <ul> <li>의 조합을 숨기기는 기본 선택 상자를 시뮬레이션하기 위해 자바 스크립트 플러그인

• 숨겨진 기본 선택 상자와 <div> <span> 시뮬레이터의 데이터를 동기화하는 코드

웹 페이지의 동작을 테스트하려면 셀렌 클라이언트를 작성해야합니다.

네이티브 선택 상자에서 테스트하기 위해이 글을 쓰면 위에 나온 3 단계를 사용하여 드롭 다운의 스타일을 지정하면 셀레늄으로 숨겨진 요소를 클릭 할 수 없으므로 테스트가 중단됩니다.

지금 스타일링을 적용하고 <div><span> 시뮬레이션을 클릭하여 셀렌 클라이언트를 작성하면 나중에 부러진 테스트가 수행 될 수도 있습니다. 웹 디자이너가 나중에 선택 상자의 스타일을 다르게 지정할 수 있기 때문에 내가 테스트 한 요소가 페이지에서 제거 될 수 있습니다.

누구나 비슷한 경험을했는지 그리고 이런 종류의 문제를 해결하기위한 최선의 방법은 무엇일까 궁금합니다.

Answer 1

나는 두 가지 옵션을 발견했다.

기본 구성 요소의 최소 스타일링. 일부 브라우저에서는 스타일을 지정할 수 있지만 주로 선택 상자의 높이와 너비와 같은 것들이 있습니다. 너무 멋진 것은 아닙니다. 브라우저가 아닌 플러그인에 종속되어 있기 때문에 일이 중단되는 것을 피하는 것이 더 좋은 선택 일 수 있습니다.

또는 요소 상단에 div를 만드는 멋진 작업을 수행 한 것처럼 플러그인을 사용할 수 있습니다. 그러나 그들 사이에 다양한 주행 거리를 가진 다양한 플러그인이 있습니다.

현재 프로젝트에서는 사용자 지정 선택 상자가 필요했습니다. 내 스크립트는 선택 상자 뒤에 div를 만들고 선택 상자를 불투명도 : 0으로 바꿉니다. 사용자는 멋진 div를 클릭한다고 생각하지만 실제로는 보이지는 않지만 선택 상자를 앞에 둡니다. . 사용자가 클릭하면 일반 선택 드롭 다운 목록이 나타납니다. 정말 멋진. 가장 좋은 점은 div를 만들기 위해 페이지로드시 javascript 만 사용한다는 것입니다. 나머지는 네이티브 컨트롤입니다. 이 방법에 대해 더 많은 정보가 필요하다면 예제를 제공 할 수 있지만 웹에서 찾은 것입니다. 아마 당신도 그것을 보았을 것입니다.