好看的html 下拉框
时间: 2023-06-17 15:05:49 浏览: 93
以下是一个基本的HTML下拉框示例:
```html
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
```
可以通过CSS样式来美化下拉框,例如:
```html
<style>
select {
width: 200px;
padding: 10px;
font-size: 16px;
border: none;
background-color: #f1f1f1;
color: #555;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
select:focus {
outline: none;
}
</style>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
```
这个样式使用了 `appearance` 属性来隐藏浏览器原生样式,然后使用自定义样式来美化下拉框。
阅读全文