bootstrap导致chrome中的<input type="date"/>和<input type="datetime-local"/>中的下拉箭头消失...

转载于 2013-03-20 15:22:00 发布 · 365 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/varlxj/archive/2013/03/20/chrome_bug_with_bootstrap.html

本文介绍了如何通过CSS代码解决Chrome浏览器25系列版本中Bootstrap框架下日期和时间输入框下拉箭头消失的问题，提供了具体的CSS样式调整方案。

项目中使用了bootstrp，结果发现在Chrome中，类型为<input type="date"/>和<input type="datetime-local"/>中的下拉箭头消失了

查了下资料，据说是chrome的BUG，而且只是chrome 25系列版本的BUG

解决办法，就是加上如下的CSS，说白了，就是调整箭头和上下选择按钮的位置

input::-webkit-inner-spin-button {
display:inline-block;
float:right;
}

input::-webkit-calendar-picker-indicator{
display: inline-block;
float:right;
margin-top:2%;
}

　　要精确一点，就加上类型限定

input[type="date"]::-webkit-inner-spin-button {
display:inline-block;
float:right;
}

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

转载于:https://www.cnblogs.com/varlxj/archive/2013/03/20/chrome_bug_with_bootstrap.html