📅 最后修改于: 2023-12-03 15:26:18.371000 🧑 作者: Mango
在 Web 应用程序中，经常需要一种方式来突出显示特定日期。日期图标颜色变化是一种流行的方式，可以在日历、待办事项列表和其他类似的应用程序中使用。
使用 CSS，我们可以设置样式，以便当用户选择特定日期时，日期图标的颜色发生变化。这可以通过 CSS 伪类 :active 或 :focus 来实现。
以下是一个示例，向用户显示一个日历，并在用户选择日期时更改日期图标的颜色：
<!DOCTYPE html>
<html>
<head>
<style>
.day {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #ccc;
margin: 1px;
text-align: center;
line-height: 20px;
}
.day:hover {
background-color: #ccc;
}
.day:active,
.day:focus {
background-color: #0f0;
}
</style>
</head>
<body>
<h3>2021年9月</h3>
<div>
<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
<div class="day">6</div>
<div class="day">7</div>
<div class="day">8</div>
<div class="day">9</div>
<div class="day">10</div>
<div class="day">11</div>
<div class="day">12</div>
<div class="day">13</div>
<div class="day">14</div>
<div class="day">15</div>
<div class="day">16</div>
<div class="day">17</div>
<div class="day">18</div>
<div class="day">19</div>
<div class="day">20</div>
<div class="day">21</div>
<div class="day">22</div>
<div class="day">23</div>
<div class="day">24</div>
<div class="day">25</div>
<div class="day">26</div>
<div class="day">27</div>
<div class="day">28</div>
<div class="day">29</div>
<div class="day">30</div>
</div>
</body>
</html>
这个示例创建了一个类名为 day 的 CSS 样式规则，该规则将所有日期图标设置为灰色的方框。鼠标悬停在日期图标上时，背景色会变为浅灰色。当用户选择日期图标时，背景色会变为绿色。
使用 CSS 的 :active 或 :focus 伪类可以很容易地实现日期图标颜色变化的效果。这种交互性可以帮助用户更容易地理解他们在应用程序中的选择。