htlml:<div class="date-selector"> <select id="year"></select> <select id="month"></select> <select id="day"></select> </div> css:.date-selector { display: flex; flex-wrap: wrap; gap: 10px; } .date-selector select { padding: 5px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; }
时间: 2024-03-05 19:55:15 浏览: 28
好的,以下是修改后的 CSS 样式代码:
```css
.date-selector {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.date-selector select {
padding: 10px;
font-size: 18px;
border: 2px solid #ccc;
border-radius: 10px;
outline: none;
}
.date-selector select:focus {
border-color: #6c63ff;
box-shadow: 0 0 5px #6c63ff;
}
```
我主要是增加了一些样式,使得选择框更加美观和易用。其中:
- `justify-content: center;` 和 `align-items: center;` 用于水平和垂直居中选择框。
- `margin-top: 20px;` 用于在选择框上方增加一些间距,让整个样式更加舒适。
- `padding: 10px;` 和 `font-size: 18px;` 使得选择框更加易用,字体更加清晰。
- `border: 2px solid #ccc;` 和 `border-radius: 10px;` 使得选择框更加美观。
- `outline: none;` 用于去除选择框获得焦点时的默认边框。
- `select:focus` 用于设置选择框获得焦点时的样式,让用户更加清晰地知道当前选择框处于获得焦点的状态。
相关推荐
![jar](https://img-home.csdnimg.cn/images/20210720083455.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)