Html text区域:有效+;标签不';在服务器上无法正常工作
我试图在联系人表单上创建一些标签文本,当联系人表单为:focus或:valid时,文本会移动到输入框上方并停留在那里 在我的本地机器上一切正常(使用括号live preview),但是,每当我出于某种原因将代码放到我的网站上时,textarea标签就不再移动了 有人知道这是为什么吗 以下是完整的代码:Html text区域:有效+;标签不';在服务器上无法正常工作,html,css,server,web,Html,Css,Server,Web,我试图在联系人表单上创建一些标签文本,当联系人表单为:focus或:valid时,文本会移动到输入框上方并停留在那里 在我的本地机器上一切正常(使用括号live preview),但是,每当我出于某种原因将代码放到我的网站上时,textarea标签就不再移动了 有人知道这是为什么吗 以下是完整的代码: <div class="section"> <div class="wrapper"> <div class="content
<div class="section">
<div class="wrapper">
<div class="content">
<h2>Contact Me</h2>
<form action="contactme.php" method="post" class="contact-form">
<div class="input-field">
<input type="text" name="name" required="">
<label for="">Full Name</label>
</div>
<div class="input-field">
<input type="text" name="cname" required="">
<label for="">Company Name</label>
</div>
<div class="input-field">
<input type="text" name="website" required="">
<label for="">Current Website (N/A if None)</label>
</div>
<div class="input-field">
<input type="email" name="mail" required="">
<label for="">E-Mail</label>
</div>
<div class="input-field">
<textarea name="message" rows="5" required=""></textarea>
<label for="">Message</label>
</div>
<input type="submit" name="submit" value="Submit Message" class="btn">
</form>
</div>
</div>
</div>
它似乎在JSFIDLE上工作。。。你也一样吗?对我来说,在JSFIDLE上工作很好,但当我把它带到主机上时,情况就是这样:我还发现,当我第一次重新加载页面时,它可以正常工作,但之后就像更新一样,不再工作:如果添加无效的电子邮件地址(不带@),然后移动到另一个字段,JSFIDLE上也会出现同样的问题。您应该更改css中的规则。这可能是实现所需的最佳方法:
body {
margin: 0;
padding: 0;
font-family: 'Roboto Condensed', sans-serif;
width: 100%;
height: 100vh;
background: linear-gradient(to bottom, rgba(0, 142, 204, 5) 50%, rgba(253, 165, 15, 5) 50%);
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
padding: 40px;
box-sizing: border-box;
background: #FFF;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
animation: fadeIn 2s 0s linear;
}
.wrapper h2 {
color: #666;
margin: 0;
padding: 0;
text-align: center;
font-size: 30px;
text-transform: uppercase;
}
.input-field {
position: relative;
width: 100%;
margin-top: 50px;
}
.input-field input,
.input-field textarea {
font-family: 'Roboto Condensed', sans-serif;
width: 100%;
padding: 5px 0;
box-sizing: border-box;
background: transparent;
border: none;
outline: none;
border-bottom: 2px solid #666;
font-size: 16px;
color: #666;
font-weight: 700;
text-transform: uppercase;
resize: none;
}
.input-field label {
position: absolute;
top: 0;
left: 0;
padding: 5px 0;
pointer-events: none;
font-size: 16px;
color: #666;
font-weight: 700;
transition: .5s;
}
.input-field input:focus + label,
.input-field textarea:focus + label,
.input-field input:valid + label,
.input-field textarea:valid + label {
top: -25px;
font-size: 14px;
padding: 2px 5px;
background: #FF006A;
color: #FFF;
border-radius: 4px;
}
.btn {
font-family: 'Roboto Condensed', sans-serif;
margin-top: 20px;
background: linear-gradient(to right, #ff9966, #ff5e62);
color: #FFF;
padding: 15px 30px;
border: none;
outline: none;
border-radius: 30px;
font-size: 16px;
float: right;
transition: all .5s;
}
.btn:hover {
cursor: pointer;
}
@media(max-width: 580px) {
.wrapper {
width: 250px;
padding: 20px;
}
.wrapper h2 {
font-size: 15px;
}
.input-field input,
.input-field textarea {
font-size: 12px;
}
.input-field label {
font-size: 12px;
}
.btn {
font-size: 12px;
}
}