-webkit-appearance实现iPad端日历框样式的改变

2012年11月1日

随着iPad的盛行，很多人开始在iPad上看网页，对于携程这样一个旅行网来说，日历控件的使用是必不可少的，然后目前使用自定义的日历控件在iPad上会影响用户的操作（使用input文本框来模拟实现，会弹出键盘导致日历弹出层被覆盖等情况）。解决的方法肯定会有，而且方法应该也挺多的，但对于JS能力不强的我而言，想到的是利用HTML5中的input日历属性值。

最初在PC端做实验时，因为文本框（type=”text”）的默认表现形式与日历框（type=”date”）是不同的，为了实现类似文本框点击后弹出日历框，利用获得焦点和失去焦点来隐藏input框。这个方法我在PC端的Chrome浏览器里看到感觉似乎还OK，操作步骤如下图顺序展示所示：

^?View Code XML

123456789101112131415161718192021222324252627

<form method="post" action="" id="frm_box"><input type="text" value="" id="txt_in" /><input type="date" id="date_in" /></form><script type="text/javascript">var t_in = document.getElementById("txt_in");var d_in = document.getElementById("date_in");var f_box = document.getElementById("frm_box"); window.onload = function() {d_in.style.display = "none"; t_in.onfocus = function() {d_in.style.display = "block";t_in.style.display = "none";} t_in.onblur = function() {t_in.style.display = "block";} d_in.onchange = function() {d_in.style.display = "none";t_in.value = d_in.value;}}</script>

^?View Code CSS

12

#frm_box {position:relative;}#frm_box input {position:absolute;top:0;left:0;}

点击查看demo效果 iPad Calendar

但现在要考虑的是在iPad上的表现，对于目前这个效果在iPad上表现是完全不行的，JS代码也不合理，试了几次虽然还是可以通过焦点获取和失去的同时来让文本框获得日历框的value，看着代码感觉总是不爽，总感觉多此一举，如果能直接改变日历框（type=”date”）的表现方式不是更直接么。

有想法就想办法实现，找了找，发现-webkit-appearance属性有一个属性值是textarea，可以直接让日历框的默认表现改成文本框的表现，哦啦，搞定，只需要一句样式代码就让iPad上的日历框变成文本框，并且还是可以取得日历的值。

^?View Code CSS

1

input[type="date"] {-webkit-appearance:textarea;}

在iPad中点击查看demo效果

不得不感慨现在的CSS是越来越强大了，需要学习和了解的东西太多了。