다양한 브라우저에서 드롭다운 목록 너비를 사용자 정의하는 방법은 무엇입니까?

IE 드롭다운 목록 너비 수정

Internet Explorer에서 드롭다운 목록은 드롭박스의 너비를 반영하는 반면, Firefox에서는 다음에 맞게 조정됩니다. 내용. 이러한 제약으로 인해 가장 긴 선택 항목을 수용하기 위해 드롭박스를 확장해야 하므로 미학적으로 보기에 좋지 않은 웹페이지가 됩니다.

다양한 너비에 대한 CSS 기반 솔루션

이 문제를 극복하려면 CSS를 사용하여 드롭박스와 드롭다운 목록에 다양한 너비를 허용하려면 다음을 고려하세요.

아래에 설명된 jQuery 기반 방법은 클릭을 포함하여 모든 키보드 및 마우스 이벤트를 처리합니다.

if (!$.support.leadingWhitespace) { // if IE6/7/8
    $('select.wide')
        .bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
        .bind('click', function() { $(this).toggleClass('clicked'); })
        .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
        .bind('blur', function() { $(this).removeClass('expand clicked'); });
}

이를 결합합니다. 다음 CSS를 사용하는 스크립트:

select {
    width: 150px; /* Or whatever width you want. */
}
select.expand {
    width: auto;
}

필요한 드롭다운 요소에 "와이드" 클래스를 추가하면 이러한 수정 사항을 적용할 수 있습니다. 예:

<select class="wide">
    ...
</select>

이 jsfiddle에서 라이브 데모를 살펴보세요: [링크]

위 내용은 다양한 브라우저에서 드롭다운 목록 너비를 사용자 정의하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!