Cursor pointer when mouse-over on date and time picker icon on chrome browser

I have a simple problem with cursor: pointer css in chrome browser but I could not solve this problem for 2 days. I will attach my code below. Please run it on Chrome browser. You will not be able to see icons on Firefox browser. Only chrome works…

<head>
  <title>Page Title</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <style type="text/css">
        input{
            cursor: pointer;
        }
    </style>

</head>

<body>
  <input type="date" id="filepicker" name="fileList" webkitdirectory />
  <br/>
  <input type="time" id="filepicker" name="fileList" webkitdirectory />
</body>

the result will look like above.
enter image description here

If I mouse over icons(red parts), then they appear only arrows.. I want to change it to pointer. Please help me if you have experience.

Thank you

3 thoughts on “Cursor pointer when mouse-over on date and time picker icon on chrome browser”

  1. With the following approach, you can achieve what you desire:

    <head>
      <title>Page Title</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
      <style type="text/css">
        input#filepicker::-webkit-calendar-picker-indicator {
          cursor: pointer;
        }
    
       
      </style>
    </head>
    
    <body>
      <input type="date" id="filepicker" name="fileList" webkitdirectory style="cursor: pointer" />
      <br />
      <input type="time" id="filepicker" name="fileList" webkitdirectory />
    </body>
    Reply
  2. <style type="text/css">
      input {
        cursor: pointer;
      }
      
      input::-webkit-calendar-picker-indicator {
        cursor: pointer;
      }
    </style>
    
    <input type="date" id="filepicker" name="fileList" webkitdirectory />
    
    <br/>
    
    <input type="time" id="filepicker" name="fileList" webkitdirectory />
    Reply

Leave a Comment