Question

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

的版本

此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上日期输入的范围并适合红框内？

Answer 1

这是一个铬虫，你可以在这里阅读：

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

Answer 2

我通过停用Chrome日期选择器控件来解决问题。这适合你吗？

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

Windows上Chrome中的日期输入宽度

2 个答案: