input 的竖杠变色,但是输入的文字是黑色怎么写
时间: 2024-02-05 12:12:21 浏览: 21
这可以通过 CSS 样式来实现。以下是一个示例代码:
HTML 代码:
```html
<div class="input-container">
<input type="text" placeholder="请输入内容">
<div class="input-line"></div>
</div>
```
CSS 样式:
```css
.input-container {
position: relative;
width: 300px;
}
.input-container input {
width: 100%;
padding: 10px;
border: none;
background: transparent;
}
.input-container .input-line {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #333;
transform: scaleX(0);
transition: transform 0.3s ease;
}
.input-container input:focus + .input-line {
transform: scaleX(1);
}
```
其中,`.input-container` 为包裹 `input` 和 `input-line` 的容器,`.input-line` 是竖杠。当 `input` 获得焦点时,`.input-line` 的 `transform` 属性会从 `scaleX(0)` 变为 `scaleX(1)`,从而实现竖杠变色的效果。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)