实现H5时间选择器点击输入框和图标均可弹出日期选择

最新推荐文章于 2025-03-17 14:00:16 发布

_江屿_

最新推荐文章于 2025-03-17 14:00:16 发布

阅读量394

点赞数 2

分类专栏： Html Css 文章标签：前端

本文链接：https://blog.youkuaiyun.com/m0_52191385/article/details/145585038

版权

Css 同时被 2 个专栏收录

11 篇文章

订阅专栏

Html

9 篇文章

订阅专栏

前言

使用H5自身的日期选择器有这么一个情况，只能通过点击右侧那个图标才可以弹出日期选择框，如下图所示：

解决点击输入框不弹出日期选择

思路：点击图标是可以弹出的，我们可以将图标进行绝对定位并覆盖掉输入框，这样就可以变相实现点击输入框弹出日期选择

代码例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>实现H5时间选择器点击输入框和图标均可弹出日期选择</title>
		<style>
			.date-input::-webkit-calendar-picker-indicator {
				position: absolute;
				right: 0;
				padding-left: calc(100% - 20px);
				padding-right: 10px;
			}
		</style>
	</head>
	<body>
		<input type="date" class="date-input">
	</body>
</html>

效果：