오버 플로우가 숨겨진 DIV 크롬에 CSS 스타일 지정

Question

폭이 200px 인 div가 있으며 오버플로가 숨김으로 설정되어 있습니다. Firefox에서는 Safari & IE가 스타일 규칙을 따르고 올바르게 표시됩니다. 그러나 크롬에서 select 요소는 규칙 집합을 따르지 않고 div 위로 이동합니다.

이 사이트는이 문제는 선택 요소의 배경 속성을했다 http://conaty.hailstormcommerce.com/index.php?route=product/category&path=20

이다.

Answer 1

나는 당신이 당신의 질문에 잘못 문제를 설명한 것 같아.

select 요소의 맞춤 드롭 다운 화살표를 만드는 것처럼 보입니다. select 요소가 올바른 너비로 설정되어 있고 오버플로가 div에 의해 숨겨져 있습니다. 그러나 Chrome에서 select은 사용자 정의 화살표를 덮는 흰색 배경을 가지고 있으며 background: transparent !important; 선언의 영향을받지 않습니다.

.selectContainer select { 
    background: transparent !important; 
    cursor: pointer; 
    -webkit-appearance: none; /* add this */ 
} 

Answer 2

SELECT은 이와 같이 동작하는 것으로 알려져 있습니다. HTML의 요소보다 OS의 컨트롤처럼 동작합니다 (라디오 버튼 및 체크 상자처럼). 오버플로를 방지하기 위해 폭을 하드 코딩해야합니다.

Answer 3

Diodeus 응답 외에도이 요소에 220px의 최소 너비가 지정되어 있습니다.

는이 작업을 수행 :

width:100%; 
min-width:0;