好看的输入框样式
时间: 2023-07-24 10:55:15 浏览: 80
以下是几个好看的输入框样式示例:
1. Underline 输入框样式:
```
input {
border: none;
border-bottom: 2px solid #999;
outline: none;
}
```
2. Material Design 输入框样式:
```
<div class="md-input">
<input type="text" id="name" name="name"/>
<label for="name">Name</label>
</div>
<style>
.md-input {
position: relative;
margin-bottom: 24px;
}
.md-input input {
border: none;
border-bottom: 1px solid #757575;
font-size: 18px;
padding: 4px 0;
width: 100%;
background-color: transparent;
color: #757575;
font-weight: bold;
outline: none;
}
.md-input label {
position: absolute;
top: 0;
left: 0;
font-size: 18px;
font-weight: bold;
color: #999;
pointer-events: none;
transition: all 0.2s ease;
}
.md-input input:focus ~ label,
.md-input input:valid ~ label {
top: -16px;
font-size: 14px;
color: #999;
}
</style>
```
3. 圆角输入框样式:
```
input {
border-radius: 20px;
border: none;
padding: 10px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
```
4. 渐变输入框样式:
```
input {
border-radius: 20px;
border: none;
padding: 10px;
background: linear-gradient(to right, #ff6b6b, #ffa06a);
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
color: white;
}
```
希望这些样式能够对你有所帮助!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)