爲什麼`input type =「date」`的行爲改變了？

Question

Chrome中的日期輸入如<input type="date" name="due_date" id="due_date" min="2011-09-01" maxlength="10" class="span8">用於允許用戶查看「彈出式」日曆以幫助選擇日期。我昨天注意到行爲已經停止;輸入只允許用戶上/下日期部分（月/日/年）。我訪問了Chrome博客並進行了Google搜索，但找不到任何此類更改。 爲什麼input type="date"的行爲改變了？奇怪的是，這種變化似乎僅限於Bootstrap，因爲http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_date仍然展示日期選擇器。

Answer 1

更新 鉻團隊接受了該錯誤並提交了patch back to WebKit。 變化的要點是日期控件將在靈活的框元素內呈現，而不管應用於輸入[type ='date']控件的樣式。

---

我是一個that reported the defect referenced here to Chromium。一個建議的解決方案是應用display：inline-block;到日曆選擇器：

input[type="date"]::-webkit-calendar-picker-indicator{ 
    display:inline-block; 
} 

然而，這是一個靠不住解決方案，因爲該控件仍然轉移到比在輸入[類型=「日期」]控制右對齊之外的位置。

另一種選擇是浮動右：

input[type="date"]::-webkit-calendar-picker-indicator { 
    display:inline-block; 
    margin-top:2%; 
    float:right; 
} 
input[type="date"]::-webkit-inner-spin-button { 
    display:inline-block; 
    float:right; 
} 

這具有反相旋轉器和日曆選擇器控制的副作用。

最好的黑客，我認爲是去除微調和浮動權：

input[type="date"]::-webkit-calendar-picker-indicator{ 
    display:inline-block; 
    margin-top:2%; 
    float:right; 
} 
input[type="date"]::-webkit-inner-spin-button { 
    /* display: none; <- Crashes Chrome on hover */ 
    -webkit-appearance: none; 
    margin: 0; 
} 

Answer 2

更新

實測值問題

引導使用2樣式屬性..

1 - 顯示：內聯塊這使得谷歌打破箭頭到另一線

2 - height：20px會阻止您看到這個「線」

Answer 3

更新

谷歌Chrome問題被標記爲一個迴歸，所以這將有望儘快修復。 作爲臨時解決辦法，下面的工作：

input[type=date]::-webkit-calendar-picker-indicator { 
    display: inline-block; 
} 

這樣你就可以保持輸入顯示屬性設置爲任何你喜歡的一切工作之前一樣。

原始響應

設置display: -webkit-inline-flex（這似乎是<input type="date" />默認值）會解決這個問題，但是這可能會改變佈局，作爲輸入就像一個內聯元素處理。

這看起來像是一個bug，我會看看是否有人已經提交了一個錯誤報告，否則我會。