jQuery联系表格标题移动效果 [英] jQuery Contact Form Titles Moving Effect

问题描述

我正在努力创建一个与我们联系的表单，如下所示。

演示： https ：//www.teamwork.com/signup
我想要的是，当我在文本框中输入文本时，Textbox Title会移到顶部。
我该怎么办？我在Fiddle写了一些代码。
你能帮助我完成这项工作吗？
小提琴： https://jsfiddle.net/3s9ehc0c/

I'm working to create a contact us form like below.
Demo :https://www.teamwork.com/signup I want to do is, When I type of text on text box, Textbox Title move to top. How can I do it. I have write some code in Fiddle. Can you help me to get this work? Fiddle : https://jsfiddle.net/3s9ehc0c/

HTML

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
    <div class="col-md-5">
        <form role="form">
            <div class="form-group inner-addon left-addon">
                <i class="fa fa-user-o" aria-hidden="true"></i>
                <input class="form-control user border-style" name="username" placeholder="Username" />
            </div>
            <br>
            <div class="form-group inner-addon left-addon">
                <i class="fa fa-user-o" aria-hidden="true"></i>
                <input class="form-control user border-style" name="username" placeholder="Username" />
            </div>
        </form>
    </div>
</div>

CSS

.border-style {
    border-width: 0 0 1px 0;
    position: relative;
    z-index: 2;
    border-radius: 0;
    height: 40px;
    font-size: 17px;
    border-color: #e6e6e6;
    padding-left: 45px;
    background-color: transparent!important;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    font-family: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.border-style:focus {
    box-shadow: none;

}

.form-group2 input:focus+i {
    color: blue;
}
.form-group1,
.form-group2 {
    display: flex;
    align-items: center;
}
.form-group1 i,
.form-group2 i {
    order: 1;
    padding-right: 0.5em;
}
.form-group input:focus+i {
    color: blue;
}

推荐答案

< i> 元素应放在选择器输入的< input> 元素之后：focus + i 以HTML格式匹配< i> 元素。

The <i> element should be placed after the <input> element for selector input:focus+i to match <i> element at HTML.

您可以使用CSS ：在之前的伪元素， attr（）引用数据的函数 - * HTML的属性，动画和过渡效果。

You can use CSS :before pseudo element, attr() function to reference data-* attribute at HTML, animation and transition for effect.

.border-style {
  border-width: 0 0 1px 0;
  position: relative;
  z-index: 2;
  border-radius: 0;
  height: 40px;
  font-size: 17px;
  border-color: #e6e6e6;
  padding-left: 45px;
  background-color: transparent!important;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  font-family: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.border-style:focus {
  box-shadow: none;
}

.form-group2 input:focus+i {
  color: blue;
}

.form-group1,
.form-group2 {
  display: flex;
  align-items: center;
}

.form-group1 i,
.form-group2 i {
  order: 1;
  padding-right: 0.5em;
}

.form-group input:focus+i {
  color: blue;
}

.form-group input:focus+i {
  color: blue;
}

.form-group input:focus+i:before {
  content: attr(data-placeholder); /* set content */
  position: relative;
  font-size: 17px;
  left: -214px;
  top: 0px;
  transition: all 1s ease; /* set transition */
  animation: placeholder 1s forwards ease; /* set animation */
}

/* do animation stuff at i element */
@keyframes placeholder {
  to {
    top: -12px;
    font-size: 12px;
    text-align: center;
    left: -204px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
  <div class="col-md-5">
    <form role="form">
      <div class="form-group inner-addon left-addon">
        <input class="form-control user border-style" name="username" placeholder="Username" />
        <i class="fa fa-user-o" aria-hidden="true" data-placeholder="Username"></i>
      </div>
      <br>
      <div class="form-group inner-addon left-addon">
        <input class="form-control user border-style" name="username" placeholder="Username" />
        <i class="fa fa-user-o" aria-hidden="true" data-placeholder="Username"></i>
      </div>
    </form>
  </div>
</div>

这篇关于jQuery联系表格标题移动效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！