W3 사양에도 불구하고 Safari 및 IE에서 패딩을 사용하여 선택 목록의 스타일을 지정하는 방법은 무엇입니까?

Safari 및 IE에서 패딩을 사용하여 선택 목록 스타일 지정

W3 사양에서는 선택 상자에 패딩 사용을 금지하지 않음에도 불구하고 Webkit 브라우저와 같은 Safari와 Chrome에서는 이 기능을 지원하지 않습니다. 원하는 효과를 얻으려면 padding-left 속성을 text-indent로 바꾸고 선택 상자 너비를 적절하게 조정하는 것이 좋습니다.

예:

다음에서 코드 조각에서 padding-left 속성은 제거되고 text-indent로 대체됩니다.

<code class="html"><select id="sexID" name="user[sex]" 
        style="border:1px solid #C1272D;
               width:258px; // 243 + 15px
               text-indent:15px;
               height:25px;
               color:#808080;"></code>

패딩이 차지했던 것과 동일한 양의 텍스트 들여쓰기를 추가하면 선택 상자가 이제 왼쪽 정렬됩니다. 텍스트 필드. 이 해결 방법은 Safari 및 IE의 패딩 동작을 효과적으로 시뮬레이션하여 다양한 브라우저에서 일관된 스타일 경험을 제공합니다.

위 내용은 W3 사양에도 불구하고 Safari 및 IE에서 패딩을 사용하여 선택 목록의 스타일을 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!