给input添加样式
时间: 2023-11-07 10:07:43 浏览: 31
如果你想给输入框添加样式,可以使用以下 CSS:
```css
input {
/* 添加边框 */
border: 1px solid #ccc;
/* 添加圆角 */
border-radius: 5px;
/* 添加内边距 */
padding: 10px;
/* 添加阴影 */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
/* 设置字体大小和颜色 */
font-size: 16px;
color: #333;
}
```
然后将这些 CSS 应用到你的 input 元素上。比如:
```html
<input type="text" placeholder="请输入内容" style="border: 1px solid #ccc; border-radius: 5px; padding: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); font-size: 16px; color: #333;">
```
相关问题
怎么给input加样式
您可以使用CSS来为input元素添加样式。以下是一些常见的样式:
1. 背景颜色和字体颜色:
```css
input {
background-color: #f2f2f2;
color: #333;
}
```
2. 边框样式和宽度:
```css
input {
border: 2px solid #ccc;
border-radius: 5px;
}
```
3. 调整宽度和高度:
```css
input {
width: 300px;
height: 30px;
}
```
4. 添加阴影效果:
```css
input {
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
```
5. 调整内边距:
```css
input {
padding: 10px;
}
```
您可以根据需要使用这些样式或创建自己的样式。
给input框添加好看的样式
你可以使用CSS来为input框添加样式。以下是一个简单的例子:
```html
<input type="text" placeholder="请输入内容" class="my-input">
```
```css
.my-input {
border: 2px solid #ccc; /* 设置边框 */
border-radius: 5px; /* 设置边框圆角 */
padding: 10px; /* 设置内边距 */
font-size: 16px; /* 设置字体大小 */
outline: none; /* 去掉默认的外边框 */
}
.my-input:focus {
border-color: #007bff; /* 设置获取焦点时的边框颜色 */
}
```
你可以根据自己的需要修改样式,例如改变边框宽度、颜色、内边距等等。
相关推荐
![text/x-c](https://img-home.csdnimg.cn/images/20210720083646.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)