<div class="container" > <h1 style="font-size: 30px; text-align: center; text-color: #aaffff"><b>Login</b></h1> <div class="input-group"> <label id="username-label">请输入用户名:</label> <input type="text" id="username" name="username"> </div> <div class="input-group"> <label>请输入密码:</label> <input type="password" id="password" name="password"> </div> <div class="input-group"> <label>请选择用户类型:</label> <select id="user-type" name="user-type" onchange="showAdminInput()"> <option value="normal">普通用户</option> <option value="admin">管理员</option> </select> </div> <button class="login-btn" onclick="login()">GO</button> </div>将标签和对应的输入框放在一条粉色的线上,不显示输入框变为透明,在输入时对应的输入框会变成淡粉色
时间: 2023-07-19 07:38:35 浏览: 57
您的问题是如何将标签和对应的输入框放在一条粉色的线上,不显示输入框变为透明,在输入时对应的输入框会变成淡粉色?
您可以使用CSS中的伪类选择器:focus来实现此效果。首先,将每个输入框放在一个div元素中,并将其设置为相对定位。然后,为每个输入框添加一个伪类选择器:focus,以便在输入时将其背景色更改为淡粉色。最后,为每个标签添加一个绝对定位的元素,将其放在对应的输入框上方,并将其背景色设置为粉色。
以下是示例CSS代码:
```
.container div {
position: relative;
}
.container div input {
border: none;
background-color: transparent;
border-bottom: 2px solid #ffc0cb;
width: 100%;
padding: 5px;
}
.container div input:focus {
background-color: #ffe4e1;
}
.container div label {
position: absolute;
top: 0;
left: 0;
background-color: pink;
padding: 5px;
}
```
注意,上面的代码只是示例代码,您需要根据您的HTML代码和样式选择进行适当的调整。
相关问题
<template> <div class="contact-us-container"> <h1>联系我们</h1> <div class="form-group"> <label style="text-align: center">Name:</label> <span style="text-align: center">{{name}}</span> </div> <div class="form-group"> <label style="text-align: center">Email:</label> <span >{{email}}</span> </div> <div class="form-group"> <label>Message:</label> <span >{{message}}</span> </div> </div> </template>把这个样式调好看
<>
<div class="contact-us-container">
<h1>联系我们</h1>
<div class="form-group">
<label>姓名:</label>
<span>{{name}}</span>
</div>
<div class="form-group">
<label>邮箱:</label>
<span>{{email}}</span>
</div>
<div class="form-group">
<label>留言:</label>
<span>{{message}}</span>
</div>
</div>
</template>
<style>
.contact-us-container {
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
font-size: 2rem;
margin-bottom: 2rem;
}
.form-group {
margin-bottom: 1rem;
display: flex;
flex-direction: column;
align-items: center;
}
label {
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
span {
font-size: 1.2rem;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 5px;
min-width: 300px;
text-align: center;
}
</style>
<body style=" background-image: url(image/bk8.gif); background-size: cover; background-repeat: no-repeat; color:pink;"> <div class="container" > <h1 style="font-size:30px;text-align:center; text-color:#B0E0E6">Login</h1> <div class="input-group"> <label id="username-label">请输入用户名:</label> <input type="text" id="username" name="username"> </div> <div class="input-group"> <label>请输入密码:</label> <input type="password" id="password" name="password"> </div> <div class="input-group"> <label>请选择用户类型:</label> <select id="user-type" name="user-type" onchange="showAdminInput()"> <option value="normal">普通用户</option> <option value="admin">管理员</option> </select> </div> <button class="login-btn" onclick="login()">GO</button> </div> </body>为什么label好text不在同一行
在上述代码中,label和input元素不在同一行的原因可能是因为它们被包含在一个div元素中,并且该div元素使用了默认的display属性值"block",这会导致它们在不同的行上显示。如果您想让它们在同一行上显示,可以尝试使用CSS的flexbox布局或者修改div元素的display属性值为"inline-block"或"inline"。例如,将以下代码添加到CSS样式中可以使得label和input在同一行上显示:
```
.input-group label, .input-group input {
display: inline-block;
vertical-align: middle;
}
```
这里使用了inline-block属性来让label和input在同一行上显示,并且使用了vertical-align属性来垂直居中它们。