Question

我希望输入的边框底部的颜色在单击时随动画更改。类似于黄线一。我希望它在所有输入框和选择上。

.input_container{
  display: inline-block;
  text-align: center;
}
.awsome_input{
  padding: 5px 10px;
  border: none;
  background: transparent;
  display: block;
}
.awsome_input_border{
  display:inline-block;
  width:0px;
  height: 2px;
  background: #FEC938;
  position: relative;
  top:-5px;
  -webkit-transition: all ease-in-out .15s;
  -o-transition: all ease-in-out .15s;
  transition: all ease-in-out .15s;
}
.awsome_input:hover,
.awsome_input:active, 
.awsome_input:focus{
  outline: none;
}
.awsome_input:hover+.awsome_input_border,
.awsome_input:active+.awsome_input_border, 
.awsome_input:focus+.awsome_input_border{
  width:100%;
  
}

<div class="input_container">
<input type="text" class="awsome_input" 
placeholder="What do you think?"/>
<span class="awsome_input_border"/>
</div>

我试图在我的代码中重新创建它，但我似乎无法正确使用它。知道怎么做吗？我知道跨度是在片段上创建黄色线但是我可以重新创建它而不是添加另一条线来改变边框颜色。

我的代码。

<!DOCTYPE html>
<html>

  <head>
    <title>form</title>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <div class="signup-form">
      <form>
        <input type="text" name="firstname" class="line-animation">
        <span class="awsome_input_border" />
        <input type="text" name="lastname" class="line-animation">
        <span class="awsome_input_border" />
        <select name="country">
          <option value="sweden">Sweden</option>
          <option value="uk">United Kingdom</option>
          <option value="us">United States</option>
          <option value="canada">Canada</option>
        </select>
        <span class="awsome_input_border" />
      </form>
    </div>
  </body>

</html>

.signup-form {
  background-color: #efefef;
  width: 50%;
}

.signup-form form {
  padding: 20px 10px
}

.signup-form input[type=text], select {
  border: none;
  border-bottom: 2px solid darkgrey;
  background-color: inherit;
  margin-right: 20px;
}

.signup-form input[type=text]:focus, select:focus {
  outline: none;
  border-bottom: 2px solid #02add7;
}

Answer 1

线索在你开头提供的代码中，你需要设置焦点上兄弟元素会发生什么：

HTML

<!DOCTYPE html>
<html>

<head>
  <title>form</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="signup-form">
    <form>
      <div class="form-group">
      <input type="text" name="firstname" class="line-animation" placeholder="firstname">
      <div class="line"></div>
      </div>
      <div class="form-group">
      <input type="text" name="lastname" class="line-animation" placeholder="lastname"><div class="line"></div>
      </div>
      <div class="form-group">
      <select name="country">
        <option value="sweden">Sweden</option>
        <option value="uk">United Kingdom</option>
        <option value="us">United States</option>
        <option value="canada">Canada</option>
        </select><div class="line"></div>
      </div>
    </form>
  </div>
</body>

</html>

CSS

.signup-form {
  background-color: #efefef;
  width: 50%;
}

.signup-form form {
  padding: 20px 10px
}

.signup-form input[type=text], select {
  border: none;
  border-bottom: 2px solid darkgrey;
  background-color: inherit;
  display: block;
  width: 100%;
  margin: none;
}

.signup-form input[type=text]:focus, select:focus {
  outline: none;
}

.form-group {
  text-align: center;
}

.form-group .line {
  height: 2px;
  width: 0px;
  position: absolute;
  background-color: darkgrey;
  display: inline-block;
  transition: .3s width ease-in-out;
  position: relative;
  top: -14px;
}

.signup-form input[type=text]:focus+.line, select:focus+.line {
  width: 100%;
  background-color: #02add7;
}

小提琴：https://jsfiddle.net/6xjyw21m/

Answer 2

请查看以下示例

body {
  background: #ccc;
}

.custom-form {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 16px;
  max-width: 360px;
  margin: 40px auto 40px;
  background: #fff;
  padding: 40px;
  border-radius: 4px;
}
.custom-form .btn-primary {
  background-color: #8e44ad;
  border-color: #8e44ad;
}
.custom-form .form-group {
  position: relative;
  padding-top: 16px;
  margin-bottom: 16px;
}
.custom-form .form-group .animated-label {
  position: absolute;
  top: 20px;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  font-weight: 300;
  opacity: 0.5;
  cursor: text;
  transition: 0.2s ease all;
  margin: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.custom-form .form-group .animated-label:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 45%;
  height: 2px;
  width: 10px;
  visibility: hidden;
  background-color: #8e44ad;
  transition: 0.2s ease all;
}
.custom-form .form-group.not-empty .animated-label {
  top: 0;
  font-size: 12px;
}
.custom-form .form-group .form-control {
  position: relative;
  z-index: 1;
  border-radius: 0;
  border-width: 0 0 1px;
  border-bottom-color: rgba(0, 0, 0, 0.25);
  height: auto;
  padding: 3px 0 5px;
}
.custom-form .form-group .form-control:focus {
  box-shadow: none;
  border-bottom-color: rgba(0, 0, 0, 0.12);
}
.custom-form .form-group .form-control:focus ~ .animated-label {
  top: 0;
  opacity: 1;
  color: #8e44ad;
  font-size: 12px;
}
.custom-form .form-group .form-control:focus ~ .animated-label:after {
  visibility: visible;
  width: 100%;
  left: 0;
}

<div>
  <div>
    <form action="#" class="custom-form">
      <h3 class="text-center">Animated Form</h3>
      <div class="form-group" ng-class="{'not-empty': userName.length}">
        <input type="text" class="form-control" name="user"  id="user" ng-model="userName"/>
        <label for="user" class="animated-label">Username</label>
      </div>
      <div class="form-group" ng-class="{'not-empty': passWord.length}">
        <input type="password" class="form-control" name="pass"  id="pass" ng-model="passWord"/>
        <label for="pass" class="animated-label">Password</label>
      </div>
      <div class="submit">
        <button class="btn btn-primary btn-block" disabled>Send</button>
      </div>
    </form>
  </div>
</div>

Answer 3

试试这个简单的例子。我没有使用任何span，只使用 border css

input { 
  border: none;
  padding-bottom: 5px;
  transition: 0.2s ease all;
}

input:focus{
    outline: none;
    border-bottom: 2px solid yellow;
}

input:hover {
  border-bottom: 2px solid yellow;
}


select { 
  border: none;
  background-color: white;
}
select:hover { 
  border-bottom: 2px solid yellow;
}

select:focus{
  outline: none;
}

<h3>INPUT</h3>
<input type="text" placeholder="What do you think?" />


<h3>SELECT</h3>
<select name="country">
        <option value="sweden">Sweden</option>
        <option value="uk">United Kingdom</option>
        <option value="us">United States</option>
        <option value="canada">Canada</option>
</select>

在输入上添加动画到边框底部

3 个答案: