CSS中如何点击一个按钮出现选择日期矿?.button{ background-color: #4285F4; color: #fff; padding: 10px 20px; border: non
CSS中如何点击一个按钮出现选择日期矿?
.button{ background-color: #4285F4; color: #fff; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } .calendar{ display: none; position: absolute; top: 50px; left: 0; z-index: 999; background-color: #fff; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); } .button:focus + .calendar{ display: block; }
首先,我们创建一个按钮并为它设置一个类名 "button"。我们也可以使用其他选择器,如ID或属性选择器。但是,为了方便起见,在这里使用类名选择器。
接下来,我们创建一个日历容器,并为其设置类名 "calendar"。我们将其视为一个弹出式面板和按钮的兄弟元素。通过将其设置为相对定位的,我们可以绝对定位其后代元素,使其显示为面板。
我们将日历容器设置为 "display:none",以便默认情况下不可见。这可以通过设置按钮的"focus"伪类来实现。因为按钮可以聚焦(即被点击或通过键盘选择),他是一个方便的开关显示日历容器。
最后,我们可以自定义按钮和日历容器的样式,以便符合自己的设计需求。这只是一个基本的例子。
粉丝
0
关注
0
收藏
0