如何防止div中的复选框和下拉列表在Safari中缩放

Question

我有一个包含一些元素的div.我希望div在被徘徊时被缩放.它在chrome中运行良好但在safari中发生了一些奇怪的事情.复选框和下拉列表也会缩放.我怎样才能在野生动物园中修复它？

.box:hover {
  transform: scale(1.03);
  -ms-transform: scale(1.03);
  -webkit-transform: scale(1.03);
  -webkit-transition: all .01s ease-in-out;
  transition: all .01s ease-in-out;
}

div {
  padding-left: 30px;
  margin: 10px;
}

.box {
  border: 1px solid black;
}

<div class="box">
  <div>
    <input type="checkbox" name="opt1" id="option1" /> hello
  </div>
  <div>
    <select>
      <option>apple</option>
      <option>orange</option>
    </select>
  </div>
  <div>
    <input type="text" placeholder="enter something" />
  </div>
</div>

Answer 1

这不是特定于浏览器的问题,转换比例属性正在以它应该工作的方式工作,它将每个嵌套元素扩展到元素1.03内.box.

唯一的方法是对子元素使用反向缩放 1 / 1.03 = 0.97

.box:hover {
  transform: scale(1.03);
  -ms-transform: scale(1.03);
  -webkit-transform: scale(1.03);
  -webkit-transition: all .01s ease-in-out;
  transition: all .01s ease-in-out;
}

div {
  padding-left: 30px;
  margin: 10px;
}

.box:hover *{
  transform: scale(0.97);
  -ms-transform: scale(0.97);
  -webkit-transform: scale(0.97);
  -webkit-transition: all .01s ease-in-out;
  transition: all .01s ease-in-out;
}

.box {
  border: 1px solid black;
}

<div class="box">
  <div>
    <input type="checkbox" name="opt1" id="option1" /> hello
  </div>
  <div>
  <select>
    <option>apple</option>
    <option>orange</option>
  </select>
  </div>
  <div>
    <input type="text" placeholder="enter something" />
  </div>
</div>

资源

Answer 2

您可以将其添加到css复选框中：

-webkit-transform:scale(3, 3);