선택 스타일을 추가하는 순수 CSS(스크립트 없음) 구현_HTML/Xhtml_웹페이지 제작

select의 기본 스타일 변경은 일반적으로 ul 및 li 시뮬레이션을 통해 수행됩니다.
이런 방식으로 선택의 기본 스타일을 변경하는 Jquery 플러그인이 많이 있습니다.
프로그래머의 피드백에 따르면 이 방법은 양식을 제출한 후 데이터를 얻을 수 없습니다. 나중에 실험 후 다른 JS/Jquery 플러그인을 사용했지만 결과는 동일했습니다. 데이터를 얻을 수 없었습니다.

나중에 외국인이 작성한 블로그를 읽었습니다. CSS 스타일을 사용하여 선택 항목 외부에 div를 추가한 다음 상위 div의 너비보다 작게 설정했습니다. div의 배경 속성을 설정하여 선택합니다. 기본 화살표 스타일입니다.
이 방법은 스크립트 작성이 필요하지 않고 간단한 CSS만 사용하는 좋은 방법입니다.

그러나 이 방법에도 결함이 있습니다. 즉, IE 시리즈에서는 옵션을 선택할 때 배경색 블록이 발생합니다.
오페라에서는 div의 배경 이미지가 표시되지 않도록 설정되어 있는데, 즉 선택의 드롭다운 화살표가 표시되지 않는 이유는 모르겠습니다.
다음 코드

코드 복사

코드는 다음과 같습니다.

AAAAAAAAAAAA
BBBBBBBBBB ;/option>
DDDDDDDDDD

🎜>

코드는 다음과 같습니다:

.select_style {width:240px; height:30px; Overflow:hidden; background:url( ../images/arrow.png) no-repeat 215px; 🎜>border:1px solid #ccc;

-moz-border-radius: 5px; /* Gecko 브라우저 */

-webkit-border- radius: 5px; /* 웹킷 브라우저 */ border- 반경:5px; .select_style 선택 { 패딩:5px; 폭:268px; 테두리: 없음; ; /*웹킷 브라우저의 경우*/ }