2
 Reservation Date<br> <input style="height:40px;width:300px;" type="date"   name="date">
   <span class="error">*<?php echo $dateErr;?></span>
   <br><br>
Reservation Time<br>(Mon - Thur: 18:00 - 23:00 Fri - Sun: 12:00 - 00:00)<br> <input type="time" align="center" style="height:40px;width:300px;" name="time">
<span class="error">*<?php echo $timeErr;?></span>
   <br><br>

enter image description here

i am trying to make a form for a website. i used type date for the date entry and made the box larger. however the arrows are very small and do not take the whole box as shown in the image. does anyone know how to fix this ?

chris
  • 137
  • 2
  • 11

2 Answers2

2

There is no native way to change the style of the arrow in the element. But you can hack a little bit around it. Check out this question. I think it's exactly what you're looking for.

Making up down arrow of HTML's input number very bigger and cleaner

Community
  • 1
  • 1
JVE
  • 833
  • 6
  • 16
0

Try to add Class and use this

.myinputdate::-webkit-inner-spin-button,
.myinputdate::-webkit-calendar-picker-indicator { 
    display: none;
    -webkit-appearance: none;
 }

This only work in WebKit browser.

Simon D.
  • 30
  • 5