Windows上Chrome中的日期输入宽度

这个小提琴显示我的问题：http://jsfiddle.net/jmTqk/2/。蓝色块遮挡旋转按钮和日期选择器下拉链接。但我认为你需要在Windows Chrome上才能看到它。这里是没有的蓝色块http://jsfiddle.net/jmTqk/1/Windows上Chrome中的日期输入宽度

此HTML

<input id='date1' type="date" /> 
<div id='abcd'>blue block</div>

一个版本，这个CSS

#date1 { 
    width:6em; 
    border: 1px solid red; 
    } 
    #abcd { 
    background-color:blue; 
    height:150px; 
    width:150px; 
    display:inline-block; 
    }

如果更改输入的宽度11em它适合。

在Ubuntu Chrome上，css将日历下拉按钮限制在日期输入字段的内部。在Windows（XP，7）上没有。有没有一种方法可以让旋转按钮和下拉菜单尊重Windows上的日期输入范围，并放入红框中？

来源

2013-01-20 Paul DeBruicker

似乎像元件具有所需的最小宽度。我看到这个元素[尽可能窄，然后是红色框]（http://i.imgur.com/KCYR0BS.png）将其切断。你可以扩大但不能低于最小值。 – sachleen

啊，这太糟糕了。它在Win 7上看起来也是错误的。我应该修正这个标题。 –

这是Chrome错误，你可以读到这里：

https://code.google.com/p/chromium/issues/detail?id=172029

来源

2013-01-25 18:33:31

我固定通过禁用浏览器日期选取器控件。这适合你吗？

input[type=date]::-webkit-inner-spin-button, 
input[type=date]::-webkit-outer-spin-button, 
input[type="date"]::-webkit-calendar-picker-indicator { 
    display:none; 
    -webkit-appearance: none; 
    margin: 0; 
}

jsFiddle demo

来源

2016-05-04 09:43:27 Zymotik

Windows上Chrome中的日期输入宽度

回答

相关问题