浏览器缩放导致奇怪的行为选择框

Question

我有一个关于浏览器缩放和我的选择框的问题。我创建了一个自定义选择框，其中包含当前的HTML和CSS代码（JSFIDDLE）：

.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>

每当您将浏览器缩小到例如75％时，我会遇到以下情况：

POLO这个词是截止的。我究竟做错了什么？这不应该缩放敏感吗？你可以将CSS样式设置为特定的缩放级别吗？

- 修改 由于select已被放置在最大宽度为150px

的div中，因此不能增加宽度

Answer 1

您可以尝试为自定义选择框指定自动宽度。

＆＃13;

＆＃13;

.custom-select
{
    position: relative;
    width:100px;
    display:inline-block;
    overflow:hidden
}
.custom-select select{
	width:auto;
	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;	
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;