I want to create an input that when you click on it, a bar appears on the bottom of the input that starts on the left and then moves out to the other side of the input.

It is simple but adds a pop to the form I want to create.

input[type=text] {
   background-color:transparent;
   border-top-style: none;
   border-right-style: none;
   border-bottom-style: solid;
   border-left-style: none;
   border-color: red;
   border-width: 5px;
   height: 50px;
   width:200px;
   font-size: 25px;
   }

I don't know how to do this since I am not the absolute best at CSS.

Thanks!

CodePudding user response：

I think this code could help you.

* {
  box-sizing: border-box;
}
.input {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
input[type=text] {
   background-color:transparent;
   border: none;
   outline: none;
   height: 50px;
   width:200px;
   font-size: 25px;
   position: relative;
   z-index: 1;
}
input[type="text"] ~ span {
  display: block;
  height: 5px;
  width: 0px;
  background-color: black;
  transition: width .3s ease;
}
input[type="text"]:focus ~ span {
  width: 200px;
}

<div class="input">
  <input type="text">
  <span></span>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

What you want to do is add a .dropdown element after the input element, and put both inside a container. Then give the .dropdown some basic styling and add position: relative and left: 0 so it will start its transition from the left, which is set with:

transition: width /* what to apply it to */ 
            500ms /* how long does it take */ 
            50ms /* initial delay */;

.dropdown's initial width of 0 is changed on hover by:

.container:hover /* the element you hover over to start the transition */
     .dropdown { /* the element you want to apply the transition to */
    /* ... */
}

Snippet

.container {
  width: 200px; height: 10px;
}
  .container:hover .dropdown {
    width: 100%;
  }

  input[type=text] {
     background-color:transparent;
     border-top-style: none;
     border-right-style: none;
     border-bottom-style: solid;
     border-left-style: none;
     border-color: red;
     border-width: 5px;
     height: 50px;
     width:200px;
     font-size: 25px;
  }

  .dropdown {
    position: relative;
    left: 0;
    width: 0; height: 100px;
    background-color: blue;
    transition: width 500ms 50ms;
  }

<form class="container">
  <input type="text">
  <div class="dropdown"></div>
</form>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>