html 尝试实现类似于我们在Gmail登录上看到的浮动输入

7gcisfzg 于 5个月前发布在其他

关注(0)|答案(1)|浏览(48)

我试图实现浮动输入，类似于我们在gmail登录.我没有通过其他几个resourse，但无法实现它.此外，我尝试与textarea标签收集地址相同.有人可以帮助我吗？

的数据

的
这是我的代码。它在一定程度上工作，但是当占位符上的内容被输入时，它与标签重叠。

/* fonts  */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500&display=swap");

/* fonts  */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 0px 20px;
  height: 100vh;
  font-family: "Roboto Slab", serif;
}

section {
  margin: 15px 0px;
}

.title {
  text-align: center;
  padding: 20px 0px 10px 0px;
  letter-spacing: 2px;
}

.form {
  margin: 10px 0px;
  padding: 40px 20px;
  width: 100%;
  max-width: 300px;
  border-radius: 5px;
  box-shadow: 0px 0px 5px 0px #666;
  background-color: #fff;
  box-sizing: border-box;
}

.input-group {
  position: relative;
  margin-bottom: 30px;
}

.customerName,
.contactNumber {
  padding: 10px;
  width: 100%;
  max-width: 300px;
  outline: none;
  border: 1px solid #04aa6d;
  box-sizing: border-box;
}

.placeholder {
  position: absolute;
  top: 8px;
  left: 12px;
  font-size: 14px;
  padding: 0px 5px;
  color: #666;
  transition: 0.3s;
  pointer-events: none;
}

.customerName:focus + .placeholder,
.contactNumber:focus + .placeholder {
  top: -10px;
  color: #04aa6d;
  background-color: #fff;
}

.input-group input:not(:placeholder-shown) + label {
  opacity: 1;
  transform: scale(0.9) translateY(-0%) translateX(-10px);
  color: #000;
}

个字符
Thanks in advance

Html

来源：https://stackoverflow.com/questions/77714906/trying-to-achive-floating-input-simiar-to-what-we-see-on-the-gmail-login

1条答案

按热度按时间

ccgok5k51#

这应该可以了你已经试过添加

:not

字符串
伪选择器，但您添加的行不起作用，因为您需要在

:not(:focus)

型
在目标元素上。下面是完整的代码。

/* CSS styles */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 0px 20px;
  height: 100vh;
  font-family: "Roboto Slab", serif;
}

section {
  position: relative;
  margin: 15px 0px;
}
.title {
  text-align: center;
  padding: 20px 0px 10px 0px;
  letter-spacing: 2px;
}
.form {
  margin: 10px 0px;
  padding: 40px 20px;
  width: 100%;
  max-width: 300px;
  border-radius: 5px;
  box-shadow: 0px 0px 5px 0px #666;
  background-color: #fff;
  box-sizing: border-box;
}
h1{
  margin: 0;
}
.input-group {
  position: relative;
  margin-bottom: 40px;
}
.customerName,
.contactNumber{
  position: relative;
  padding: 10px;
  width: 100%;
  max-width: 300px;
  outline: none;
  border: 1px solid #04aa6d;
  box-sizing: border-box;
  font-size: 18px;
  background:none;
}
.placeholder{
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 18px;
  padding: 0px 5px;
  color: #000;
  transition: 0.3s;
  pointer-events: none;
}

.input:focus + .placeholder{
  top: -10px;
  color: #04aa6d;
  background-color: #fff;
  font-size: 19px;
}
.input:not(:placeholder-shown).input:not(:focus)+ .placeholder{
  top:-12px;
  left: 12px;
  color: #04aa6d;
  background-color: #fff;
  font-size: 18px;
  font-weight: 500;
  transform: scale(0.9) translateY(-0%) translateX(-10px);
}

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<body>
  <header>
      <h2 class="title">Test Form</h2>
    </header>
  <main>
      <!-- customer Details start -->
      <section>
        <h5>Customer Details</h5>
             <form action="" class="form">
               
               <div class="input-group">
                     <input type="text" class="input customerName" placeholder=" ">
                     <label for="" class="placeholder">Name</label>
                 </div>
               
                 <div class="input-group">
                    <input type="password" class="input contactNumber" placeholder=" ">
                    <label for="" class="placeholder">Password</label>
                </div>
               
             <div class="input-group">
            <label class="placeholder">Address</label>
            <textarea
              class="contactNumber"
              rows="4"
              cols="32"
            >
              Enter Address here...
            </textarea>
          </div>
             </form>
              </section>
      <!-- customer Details end -->
    </main>
</body>
</html>

的字符串
希望有帮助！

赞(0）回复(0）举报 5个月前

我来回答

html 尝试实现类似于我们在Gmail登录上看到的浮动输入

1条答案

相关问题

热门标签

最新问答