Breaking News: Grepper is joining You.com. Read the official announcement!

input border bottom animation css

Real Raven answered on July 19, 2022 Popularity 5/10 Helpfulness 1/10

answer input border bottom animation css

input border bottom animation css

Comment

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

Popularity 5/10 Helpfulness 1/10 Language css

Source: stackoverflow.com

Tags: animation border css input

Link to this answer
Share Copy Link