修改el-date-picker组件的样式,使得组件日期下拉框的每个日期下面,都添加一个蓝色小圆点
时间: 2023-11-08 20:07:25 浏览: 134
datepicker 指定日期样式
4星 · 用户满意度95%
可以通过以下步骤来修改`el-date-picker`组件的样式,添加蓝色小圆点:
1. 在项目中创建一个新的CSS文件,例如`my-datepicker.css`。
2. 在HTML页面中引入这个新CSS文件。
3. 使用CSS伪元素`:after`来添加蓝色小圆点,代码如下:
```css
.el-date-picker__content table td.available:not(.disabled):not(.weekend):hover:after,
.el-date-picker__content table td.available:not(.disabled):not(.weekend).today:after {
content: "";
display: block;
height: 6px;
width: 6px;
border-radius: 50%;
background-color: blue;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) translateY(100%);
}
```
4. 以上代码中的选择器`.el-date-picker__content table td`选择日期下拉框中每个日期单元格。`:not(.disabled)`和`:not(.weekend)`选择没有被禁用和不是周末的日期单元格。`:hover:after`和`.today:after`用于在鼠标悬停或今天日期下显示蓝色小圆点。
5. 将以上CSS代码添加到`my-datepicker.css`文件中保存即可。
阅读全文