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=".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>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.
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
Share Improve this question edited Feb 11, 2021 at 1:37 asked Feb 11, 2021 at 1:12 user14860400user14860400 3- where is the problem? it's a browser feature. what does this have to do with cursor-pointers? – tacoshy Commented Feb 11, 2021 at 1:25
- If you mouse over date or time picker icon, the mouse cursor is arrow... I want to change it into pointer (hand)... – user14860400 Commented Feb 11, 2021 at 1:31
- I added a new css for input{cursor: pointer}, but mouse cursor is pointer on input element.. and is arrow on picker icon... – user14860400 Commented Feb 11, 2021 at 1:38
2 Answers
Reset to default 17 +200
<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 />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>