标签: webkit-appearance

给定一个基本的HTML模板和CSS样式,我看到两个不同的元素反应完全不同.

setTimeout(function() {
  document.body.id = 'animate';
}, 100);

#animate input[type="checkbox"]{
  width: 100px;
  height: 100px;
  transition: 2s all;
  -moz-appearance: none;
}
#animate div{
  width: 100px;
  height: 100px;
  background:blue;
  transition: 2s all;
}

<input type="checkbox"/>
<div></div>

如果你在浏览器中打开它,你会看到,在加载时,div已经有100px高度/宽度,但复选框从0px增加到100px高度/宽度超过2s.

为什么input表现与div？不同？是因为输入有默认值,-webkit-appearance可以在它之间进行转换吗？

因此 Apple/Safari 对于各种元素都有自己的 CSS，例如<select>或<button>。

我可以通过使用来解决这个问题，-webkit-appearance:none;但对于我的<select>，这也是删除我想保留的小下拉箭头。

有没有办法解决这个问题，删除其他附加样式但保留箭头，或者以跨浏览器一致的方式替换箭头？

我知道这听起来很有线。目前我有多个复选框，我想让它看起来像单选按钮

以下 CSS 在 IE 中不起作用

input[type='checkbox'] {
-webkit-appearance: radio; /* Chrome, Safari, Opera */
-moz-appearance: radio;    /* Firefox */
appearance: radio;   //how about IE>8 ?
}