我有以下代碼：
/* Contact Form */
input[type=text],
[type=email],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #555;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #0563bb;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type="text"]:focus,
input[type="email"]:focus,
#subject:focus {
background: var(--bgFormElsFocus);
transform: scale(1.02);
transition: transform 0.2s ease-in-out;
}
input[type=submit]:hover {
opacity: 0.9;
}
.contactform {
position: relative;
border-radius: 50px;
background-color: #f2f2f2;
padding: 5px;
z-index: 2;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: 1%;
width: 100%;
animation-name: gradient;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.contactform:hover {
animation-name: gradient;
animation-duration: 15s;
animation-iteration-count: infinite;
}
.column {
float: center;
width: 50%;
margin-top: 6px;
padding: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.column,
input[type=submit] {
width: auto;
margin-top: 0;
}
}
.shakingErr {
border-color: red;
animation: shake 0.82s forwards;
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}<section id="contact">
<div class="container" data-aos="fade-up">
<div class="contactform">
<div style="text-align:center">
<div class="section-title">
<h2><br/>Get In Touch</h2>
</div>
<p>Feel Free To Reach Out To Me Through This Form! </p>
</div>
<div class="row">
<div class="column">
<form name="myform" action="https://formspree.io/f/xr123gjbqpq" id="my-form" method="POST" novalidate>
<label for="firstname">First Name</label>
<input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your Email.." required>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</section>我想要輸入欄位上的文本影片。例如，我希望我的預期輸出是這樣的：
https://watch.screencastify.com/v/3mlMie2rx0UzhdymHYCR
如您所見，我希望諸如“名字”之類的文本位于輸入欄位內，并且當用戶單擊輸入欄位時，該文本應具有影片效果并位于頂部。我怎樣才能完成這個任務？有什么建議？
uj5u.com熱心網友回復：
有很多變體如何做到這一點，其中之一是使用額外的div作為輸入和標簽，標簽將扮演浮動文本的角色：
.wrapper {
padding: 20px;
}
.input-data {
height: 40px;
width: 100%;
position: relative;
}
.input-data input {
height: 100%;
width: 100%;
border: none;
font-size: 17px;
border-bottom: 2px solid silver;
transition: border-color .4s;
outline: none;
}
.input-data input:focus~label,
.input-data input:valid~label {
transform: translateY(-20px);
font-size: 13px;
color: #4158d0;
}
.input-data label {
position: absolute;
bottom: 10px;
left: 0;
color: grey;
pointer-events: none;
transition: all 0.3s ease;
}
.input-data input:focus,
.input-data input:valid {
border-color: #4158d0;
}<div class="wrapper">
<div class="input-data">
<input type="text" required>
<label>Name</label>
</div>
</div>uj5u.com熱心網友回復：
我嘗試使用您鏈接的視頻作為參考為您創建測驗版
僅使用 HTML 和 CSS...
這里的技巧是創建一個額外的 Div 作為父級，所以我們可以將標簽和輸入放在里面。
現在將父級設定為有一個，position: relative;因此標簽將是absolute
現在我們可以成功地使用 TOP、LEFT、RIGHT、BOTTOM，就是這樣（將標簽定位為占位符）
邏輯
我把邏輯放在這里 .input-container input:focus~label
確保標簽在 HTML 中的輸入之后，并且在父級內部
洗掉焦點上的邊框
請記住，如果輸入焦點，它會自動像邊框一樣......
要洗掉這條邊界使用outline: none;，因為這條邊界CAN NOT與被洗掉border: none;
就是這樣，測驗我為你寫的代碼！我希望這會有所幫助
這里的代碼
* {
--input-height: 3rem;
--light-black: rgba(0, 0, 0, 0.3);
--medium-black: rgba(0, 0, 0, 0.6);
}
section {
height: 100vh;
width: 100vw;
display: grid;
place-content: center;
}
.input-container input {
height: var(--input-height);
width: 80vw;
font-size: 2rem;
border: none;
border-bottom: 2px solid var(--light-black);
}
.input-container {
position: relative;
display: grid;
place-items: center start;
}
.input-container label {
position: absolute;
left: 1rem;
font-size: 1.5rem;
color: var(--medium-black);
transition-duration: 0.5s;
}
.input-container input:focus~label {
position: absolute;
font-size: 1rem;
top: -1rem;
left: 0;
transition-duration: 0.2s;
z-index: 2;
}
.input-container input:focus {
outline: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<form action="">
<div class="input-container">
<input type="text" name="" id="my-input">
<label for="my-input">name</label>
</div>
</form>
</section>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/399000.html
標籤：javascript html 查询 css