输入框左边显示请输入用户名,没有边框但有一条粉色的底线
时间: 2024-03-19 14:45:39 浏览: 72
输入框背景文字提示
5星 · 资源好评率100%
可以使用CSS来设置输入框左侧显示请输入用户名,没有边框但有一条粉色的底线。具体代码如下:
HTML代码:
```html
<div class="form-group">
<label for="inputField">请输入用户名</label>
<input type="text" class="form-control" id="inputField">
</div>
```
CSS代码:
```css
.form-group {
position: relative;
margin-bottom: 20px;
}
.form-group label {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
padding: 0 10px;
background-color: #fff;
}
.form-group input {
border: none;
border-bottom: 2px solid #f06;
padding: 5px 10px;
margin-left: 120px;
}
```
这里使用了相对定位和绝对定位来将标签定位在左侧,并且使用了transform属性来使标签垂直居中。同时,输入框的边框被设置为none,只保留了下边框,并且设置了粉色的颜色。使用了margin-left属性来使输入框距离左侧的提示语有一定的距离。
阅读全文