How to achieve underline effect for an input

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

I'm trying to get the underline effect when the input is focused (-> left to right)

I saw a lot of "tricks" you can achive that with.

But I was wondering what is the most efficient way to achive this?

(Browser support wise and syntactic wise)

Thanks.

edited Jan 3 at 11:50

asked Jan 3 at 9:54

Shibex

216

closed as primarily opinion-based by Paulie_D, Mr Lister, grizzthedj, Jackson, Mike Bonnell Jan 3 at 14:50

Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise. If this question can be reworded to fit the rules in the help center, please edit the question.

add a comment |

I'm trying to get the underline effect when the input is focused (-> left to right)

I saw a lot of "tricks" you can achive that with.

But I was wondering what is the most efficient way to achive this?

(Browser support wise and syntactic wise)

Thanks.

edited Jan 3 at 11:50

asked Jan 3 at 9:54

Shibex

216

closed as primarily opinion-based by Paulie_D, Mr Lister, grizzthedj, Jackson, Mike Bonnell Jan 3 at 14:50

add a comment |

I'm trying to get the underline effect when the input is focused (-> left to right)

I saw a lot of "tricks" you can achive that with.

But I was wondering what is the most efficient way to achive this?

(Browser support wise and syntactic wise)

Thanks.

edited Jan 3 at 11:50

asked Jan 3 at 9:54

Shibex

216

I'm trying to get the underline effect when the input is focused (-> left to right)

I saw a lot of "tricks" you can achive that with.

But I was wondering what is the most efficient way to achive this?

(Browser support wise and syntactic wise)

Thanks.

css css3

edited Jan 3 at 11:50

asked Jan 3 at 9:54

Shibex

216

edited Jan 3 at 11:50

asked Jan 3 at 9:54

Shibex

216

edited Jan 3 at 11:50

asked Jan 3 at 9:54

Shibex

216

asked Jan 3 at 9:54

Shibex

216

asked Jan 3 at 9:54

Shibex

216

closed as primarily opinion-based by Paulie_D, Mr Lister, grizzthedj, Jackson, Mike Bonnell Jan 3 at 14:50

add a comment |

2 Answers
2

active

oldest

votes

.input{

  position: relative;

  display: inline-block;

  overflow: hidden;

}

.input > .txt-underline{

  border: none;

  outline: none;

}



.underline{

  transition: all 0.5s;

  display: inline-block;

  bottom: 0;

  left: -100%;

  position: absolute;

  width: 100%;

  height: 2px;

  background-color: #f00;

}

.input > .txt-underline:focus + .underline{

  left: 0;

}

<div class="input">

  <input type="text" class="txt-underline" placeholder="Please Enter Name">

  <span class="underline"></span>

</div>

edited Jan 3 at 10:10

answered Jan 3 at 10:05

Udhay Titus

2,92421532

1

Very nice, thank you.

– Shibex
Jan 3 at 10:15

add a comment |

Here is a simple and easy example.

#input {

  position: relative;

  display: inline-block

}



span {

  content: '';

  position: absolute;

  left: 0;

  bottom: -5px; /* depending on height */

  height: 5px; /* height of span -like border */

  background: #f00;

  transition: all 0.5s linear;

  width: 0 /* hidden */

}



input:hover ~ span {

  width: 100% /* full width on hover */

}

<div id="input">

  <input type="text" placeholder="input" /><span></span>

</div>

answered Jan 3 at 10:27

Mordecai

1,0671212

add a comment |

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

.input{

  position: relative;

  display: inline-block;

  overflow: hidden;

}

.input > .txt-underline{

  border: none;

  outline: none;

}



.underline{

  transition: all 0.5s;

  display: inline-block;

  bottom: 0;

  left: -100%;

  position: absolute;

  width: 100%;

  height: 2px;

  background-color: #f00;

}

.input > .txt-underline:focus + .underline{

  left: 0;

}

<div class="input">

  <input type="text" class="txt-underline" placeholder="Please Enter Name">

  <span class="underline"></span>

</div>

edited Jan 3 at 10:10

answered Jan 3 at 10:05

Udhay Titus

2,92421532

1

Very nice, thank you.

– Shibex
Jan 3 at 10:15

add a comment |

.input{

  position: relative;

  display: inline-block;

  overflow: hidden;

}

.input > .txt-underline{

  border: none;

  outline: none;

}



.underline{

  transition: all 0.5s;

  display: inline-block;

  bottom: 0;

  left: -100%;

  position: absolute;

  width: 100%;

  height: 2px;

  background-color: #f00;

}

.input > .txt-underline:focus + .underline{

  left: 0;

}

<div class="input">

  <input type="text" class="txt-underline" placeholder="Please Enter Name">

  <span class="underline"></span>

</div>

edited Jan 3 at 10:10

answered Jan 3 at 10:05

Udhay Titus

2,92421532

1

Very nice, thank you.

– Shibex
Jan 3 at 10:15

add a comment |

.input{

  position: relative;

  display: inline-block;

  overflow: hidden;

}

.input > .txt-underline{

  border: none;

  outline: none;

}



.underline{

  transition: all 0.5s;

  display: inline-block;

  bottom: 0;

  left: -100%;

  position: absolute;

  width: 100%;

  height: 2px;

  background-color: #f00;

}

.input > .txt-underline:focus + .underline{

  left: 0;

}

<div class="input">

  <input type="text" class="txt-underline" placeholder="Please Enter Name">

  <span class="underline"></span>

</div>

edited Jan 3 at 10:10

answered Jan 3 at 10:05

Udhay Titus

2,92421532

.input{

  position: relative;

  display: inline-block;

  overflow: hidden;

}

.input > .txt-underline{

  border: none;

  outline: none;

}



.underline{

  transition: all 0.5s;

  display: inline-block;

  bottom: 0;

  left: -100%;

  position: absolute;

  width: 100%;

  height: 2px;

  background-color: #f00;

}

.input > .txt-underline:focus + .underline{

  left: 0;

}

<div class="input">

  <input type="text" class="txt-underline" placeholder="Please Enter Name">

  <span class="underline"></span>

</div>

.input{

  position: relative;

  display: inline-block;

  overflow: hidden;

}

.input > .txt-underline{

  border: none;

  outline: none;

}



.underline{

  transition: all 0.5s;

  display: inline-block;

  bottom: 0;

  left: -100%;

  position: absolute;

  width: 100%;

  height: 2px;

  background-color: #f00;

}

.input > .txt-underline:focus + .underline{

  left: 0;

}

<div class="input">

  <input type="text" class="txt-underline" placeholder="Please Enter Name">

  <span class="underline"></span>

</div>

.input{

  position: relative;

  display: inline-block;

  overflow: hidden;

}

.input > .txt-underline{

  border: none;

  outline: none;

}



.underline{

  transition: all 0.5s;

  display: inline-block;

  bottom: 0;

  left: -100%;

  position: absolute;

  width: 100%;

  height: 2px;

  background-color: #f00;

}

.input > .txt-underline:focus + .underline{

  left: 0;

}

<div class="input">

  <input type="text" class="txt-underline" placeholder="Please Enter Name">

  <span class="underline"></span>

</div>

edited Jan 3 at 10:10

answered Jan 3 at 10:05

Udhay Titus

2,92421532

edited Jan 3 at 10:10

answered Jan 3 at 10:05

Udhay Titus

2,92421532

answered Jan 3 at 10:05

Udhay Titus

2,92421532

answered Jan 3 at 10:05

Udhay Titus

2,92421532

1

Very nice, thank you.

– Shibex
Jan 3 at 10:15

add a comment |

1

Very nice, thank you.

– Shibex
Jan 3 at 10:15

Very nice, thank you.

– Shibex
Jan 3 at 10:15

add a comment |

Here is a simple and easy example.

#input {

  position: relative;

  display: inline-block

}



span {

  content: '';

  position: absolute;

  left: 0;

  bottom: -5px; /* depending on height */

  height: 5px; /* height of span -like border */

  background: #f00;

  transition: all 0.5s linear;

  width: 0 /* hidden */

}



input:hover ~ span {

  width: 100% /* full width on hover */

}

<div id="input">

  <input type="text" placeholder="input" /><span></span>

</div>

answered Jan 3 at 10:27

Mordecai

1,0671212

add a comment |

Here is a simple and easy example.

#input {

  position: relative;

  display: inline-block

}



span {

  content: '';

  position: absolute;

  left: 0;

  bottom: -5px; /* depending on height */

  height: 5px; /* height of span -like border */

  background: #f00;

  transition: all 0.5s linear;

  width: 0 /* hidden */

}



input:hover ~ span {

  width: 100% /* full width on hover */

}

<div id="input">

  <input type="text" placeholder="input" /><span></span>

</div>

answered Jan 3 at 10:27

Mordecai

1,0671212

add a comment |

Here is a simple and easy example.

#input {

  position: relative;

  display: inline-block

}



span {

  content: '';

  position: absolute;

  left: 0;

  bottom: -5px; /* depending on height */

  height: 5px; /* height of span -like border */

  background: #f00;

  transition: all 0.5s linear;

  width: 0 /* hidden */

}



input:hover ~ span {

  width: 100% /* full width on hover */

}

<div id="input">

  <input type="text" placeholder="input" /><span></span>

</div>

answered Jan 3 at 10:27

Mordecai

1,0671212

Here is a simple and easy example.

#input {

  position: relative;

  display: inline-block

}



span {

  content: '';

  position: absolute;

  left: 0;

  bottom: -5px; /* depending on height */

  height: 5px; /* height of span -like border */

  background: #f00;

  transition: all 0.5s linear;

  width: 0 /* hidden */

}



input:hover ~ span {

  width: 100% /* full width on hover */

}

<div id="input">

  <input type="text" placeholder="input" /><span></span>

</div>

#input {

  position: relative;

  display: inline-block

}



span {

  content: '';

  position: absolute;

  left: 0;

  bottom: -5px; /* depending on height */

  height: 5px; /* height of span -like border */

  background: #f00;

  transition: all 0.5s linear;

  width: 0 /* hidden */

}



input:hover ~ span {

  width: 100% /* full width on hover */

}

<div id="input">

  <input type="text" placeholder="input" /><span></span>

</div>

#input {

  position: relative;

  display: inline-block

}



span {

  content: '';

  position: absolute;

  left: 0;

  bottom: -5px; /* depending on height */

  height: 5px; /* height of span -like border */

  background: #f00;

  transition: all 0.5s linear;

  width: 0 /* hidden */

}



input:hover ~ span {

  width: 100% /* full width on hover */

}

<div id="input">

  <input type="text" placeholder="input" /><span></span>

</div>

answered Jan 3 at 10:27

Mordecai

1,0671212

answered Jan 3 at 10:27

Mordecai

1,0671212

answered Jan 3 at 10:27

Mordecai

1,0671212

answered Jan 3 at 10:27

Mordecai

1,0671212

add a comment |

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu