Quiero que el color del borde inferior de mi entrada cambie con una animación al hacer clic. Similar a la línea amarilla uno este. Quiero que esto esté en todos los cuadros de entrada y seleccionar.

.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>

He intentado recrear esto en mi código, pero parece que no puedo hacerlo bien. ¿Alguna idea de cómo se hace esto? Entiendo que el tramo es lo que crea la línea amarilla en el fragmento, pero ¿puedo volver a crear esto para cambiar el color del borde en lugar de agregar otra línea?

Mi código.

<!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;
}
1
Naomi 17 ene. 2018 a las 14:09

3 respuestas

La mejor respuesta

Bueno, la pista estaba en el código que proporcionó al principio, debe establecer qué sucede con el elemento hermano en foco:

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;
}

Fiddle: https://jsfiddle.net/6xjyw21m/

1
John Bell 17 ene. 2018 a las 11:35

Prueba este sencillo ejemplo. No estoy usando ninguna span y solo estoy usando 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>
0
DragonBorn 17 ene. 2018 a las 11:34

Por favor, consulte la siguiente muestra

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>
0
vic 17 ene. 2018 a las 11:13