CSS는 선택(스크립트 없음) 구현에 스타일을 추가합니다.

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

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

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

html 코드:

<div class="select_style"> 
<select name="select"> 
<option>AAAAAAAAAAA</option> 
<option>BBBBBBBBBBB</option> 
<option selected>CCCCCCCCCCC</option> 
<option>DDDDDDDDDDD</option> 
</select> 
</div>

CSS 코드:

.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 browsers */ 
-webkit-border-radius: 5px; /* Webkit browsers */ 
border-radius:5px; 
} 
.select_style select { padding:5px; background:transparent; width:268px; font-size: 16px; border:none; height:30px; 
-webkit-appearance: none; /*for Webkit browsers*/ 
}

위 내용은 CSS는 선택(스크립트 없음) 구현에 스타일을 추가합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!