css3选日期 |css 图片 虚化

.date-picker {
display: inline-block;
position: relative;
}
.date-picker input {
width: 100%;
height: 32px;
padding: 8px;
border: 1px solid #ddd;
background-color: #fff;
color: #333;
font-size: 14px;
cursor: pointer;
}
.date-picker::after {
content: '\f073';
font-family: 'FontAwesome';
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
font-size: 16px;
color: #333;
pointer-events: none;
}
.date-picker-popup {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 9999;
width: 240px;
background-color: #fff;
border: 1px solid #ddd;
padding: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.date-picker-popup.visible {
display: block;
}
.date-picker-calendar {
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
}
.date-picker-calendar li {
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
text-align: center;
cursor: pointer;
margin: 5px;
}
.date-picker-calendar li.selected {
background-color: #333;
color: #fff;
}

代码中定义了一个名为.date-picker的类，它用于包裹日期选择器的输入框和弹出框。输入框使用了input标签，并设置了宽度、高度、边框、背景色、字体大小等样式。类名为.date-picker的伪类::after用于在输入框后添加一个指向弹出框的箭头。弹出框使用了类名为.date-picker-popup的div，并设置了绝对定位、背景色、边框、阴影等样式。

日期选择器中最重要的是弹出的日历部分，它使用了一个名为.date-picker-calendar的class，内部包含了很多日期单元格，每个单元格都是一个li标签。如果用户点击了一个日期单元格，它的class会变为selected，同时会更新输入框中的日期。

使用这个CSS3代码，大家可以轻松地在网页上添加一个日期选择器，让用户方便选择所需日期，提高网站的用户体验。