日历框样式修改

application/views/mobile_first/ch-visa-free-tester.php

@@ -317,11 +317,7 @@
     clear: both !important;
     padding-bottom: 10px;
     margin-top: 20px;">3. My arrival date is...</p>
-        <input id="arrival_date" name="arrival_date" type="date" style="width: 92%;
-        background: url(https://data.chinahighlights.com/pic/top10/tour-calendar.png) no-repeat 15px #fff;
-        padding-left: 50px;
-        border-radius: 6px;
-        height: 40px;">
+        <input id="arrival_date" name="arrival_date" type="date" class="date_pick">
         <span id="arrival_date_errmsg" style="display: none;">
           <span class="requiredArea">Please select your arrival date.</span>
         </span>
@@ -596,11 +592,7 @@
     clear: both !important;
     padding-bottom: 10px;
     margin-top: 20px;">5. My departure date is...</p>
-        <input id="departure_date" name="departure_date" type="date" style="width: 92%;
-        background: url(https://data.chinahighlights.com/pic/top10/tour-calendar.png) no-repeat 15px #fff;
-        padding-left: 50px;
-        border-radius: 6px;
-        height: 40px;">
+        <input id="departure_date" name="departure_date" type="date" class="date_pick">
         <span id="departure_date_errmsg" style="display: none;">
           <span class="requiredArea">Please select your departure date.</span>
         </span>
@@ -1195,3 +1187,13 @@ ready(el => {
   });
 });
 </script>
+<style>
+.date_pick {width: 92%;
+        background: url(https://data.chinahighlights.com/pic/top10/tour-calendar.png) no-repeat 15px #fff;
+        padding-left: 50px;
+        border-radius: 6px;
+        height: 40px;}
+        @media (max-width: 750px) {
+          .date_pick {width: 86%;}      
+        }
+</style>