브라우저 줌이 이상한 동작 선택 상자를 발생했습니다.

Question

브라우저 확대/축소 및 선택 상자와 관련하여 질문이 있습니다. 나는 현재 HTML과 CSS 코드 (JSFIDDLE)와 사용자 정의 선택 상자를 만들었습니다 : 당신은 예를 들어,에 나는 다음과 같은 상황을 얻는 75 % 브라우저를 축소 할 때마다

.custom-select { 
 
    position: relative; 
 
    width: 100px; 
 
    display: inline-block; 
 
} 
 
.custom-select select { 
 
    width: 100%; 
 
    padding: 8px 5px 8px 10px; 
 
    height: 36px; 
 
    border: 1px solid #cacaca; 
 
    color: #0085c8; 
 
} 
 
.custom-select.svg > svg.dropdown-button { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 34px; 
 
    height: 34px; 
 
    background-color: #fff; 
 
    background-image: url(https://cdn0.iconfinder.com/data/icons/solid-line-essential-ui-icon-set/512/essential_set_down-16.png); 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    pointer-events: none; 
 
    border: 1px solid #cacaca; 
 
    color: #0085c8; 
 
    display: inline-block; 
 
}

<div class="custom-select svg"> 
 
    <select> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
    <option value="Volkswagon Polo">Volkswagon Polo</option> 
 
    </select> 
 
    <svg class="dropdown-button"></svg> 
 
</div>

여기서 POLO는 잘림입니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까? 확대/축소 민감하지 않아야합니까? CSS 스타일을 특정 확대/축소 수준으로 설정할 수 있습니까? 폭 증가

는

--edit 때문에 선택 당신은 사용자 정의에 자동 폭을주는 시도 할 수 150px

Answer 1

의 최대 폭 사업부 내부에 배치되어 있다는 사실에 옵션이 아닙니다 선택 상자.

.custom-select 
 
{ 
 
    position: relative; 
 
    width:100px; 
 
    display:inline-block; 
 
    overflow:hidden 
 
} 
 
.custom-select select{ 
 
\t width:auto; 
 
\t padding: 8px 5px 8px 10px; \t 
 
\t height:36px; 
 
\t border: 1px solid #cacaca; 
 
\t color: #0085c8; \t \t 
 
} 
 
.custom-select.svg > svg.dropdown-button 
 
{ 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 34px; 
 
    height: 34px; 
 
    background-color: #fff; 
 
    background-image: url(https://cdn0.iconfinder.com/data/icons/solid-line-essential-ui-icon-set/512/essential_set_down-16.png); 
 
    background-repeat:no-repeat; 
 
    background-position:center; 
 
    pointer-events: none; 
 
\t border: 1px solid #cacaca; 
 
\t color: #0085c8; 
 
\t display:inline-block; \t 
 
}

<div class="custom-select svg"> 
 
    <select> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
    <option value="Volkswagon Polo">Volkswagon Polo</option> 
 
    </select> 
 
    <svg class="dropdown-button"></svg> 
 
</div>