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

by

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

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

Leave a Comment