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

4 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