目标是<input type="date">下拉列表？

Question

我试图缩放我的输入框，它接受一个日期。

然而，在Edge上，它也会缩放请求日期的下拉列表。我不想这样。它在Chrome上运行得很好。

示例代码：

​

#normal {
    position: absolute;
    left: 100px;
    top: 50px;
}

#scaled {
    position: absolute;
    left: 100px;
    top: 100px;
}

#scaled:hover {
    transform: scale(2);
}

<!doctype html>
<input type="date" id="normal" />
<input type="date" id="scaled" />

​

我正在考虑明确地将其作为目标，并告诉它不要扩展。

那么，我们如何瞄准它呢？

或者，有没有更好的方法告诉它不要缩放Edge上的下拉列表？

Answer 1

对于目标边缘，您可以使用-ms-ime-align支持。edge是唯一支持此属性的Microsoft浏览器。将此部件添加到css文件中的其他部件旁边。

@supports (-ms-ime-align: auto) {
    #scaled {
        transform: scale(1) !important;
    }
}

请记住，你必须在一个单独的文件中编写这个css，如果你在html页面中使用inline，你可能会得到一个错误。

Answer 2

我试着用MS Edge (EdgeHtml)浏览器测试你的代码样本，我可以在我这边产生这个问题。

看起来Edge浏览器有问题，我们不能使用代码来修复它。

根据MDN文档中的信息，扩展可能会产生可访问性问题。

缩放/缩放动画对于可访问性是有问题的，因为它们是某些类型偏头痛的常见触发因素。如果你需要在你的网站上包含这样的动画，你应该提供一个控件，允许用户关闭动画，最好是整个网站。

此外，请考虑使用首选-简化运动媒体功能-使用它编写一个媒体查询，如果用户在其系统首选项中指定了简化动画，则该媒体查询将关闭动画。

参考资料：

scale() Accessibility concerns

正如文档中所建议的，您可以将关闭动画的控制权交给用户。作为一种解决办法，用户可以使用MS Edge can browser。运行得很好。