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!
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>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 */
/* ... */
}
.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>