CSS: Scale text field without scaling text inside - css

Question

Is it possible to scale a text input only on the X axis while maintaining the size of the font?
I did something like this:
#searchInput {
text-decoration: none;
display: inline-block;
background-color: rgba(0, 0, 0, 0);
border: none;
border-bottom: 3px solid transparent;
width: 10px;
border-bottom-color: blue;
padding-left: 10px;
padding-bottom: 5px;
height: 40px;
font-size: 30px;
color: #307fff;
transition: 1s ease;
transform-origin: top left;
}
#searchInput:hover {
border-bottom: 3px solid blue;
transform: scaleX(25);
}
#searchInput:focus {
border-bottom: 3px solid blue;
transform: scaleX(25);
}
<input type="text" id="searchInput" name="search">
The result is the cursor on the middle of the input and the text stretched
Doing the same animation changing the width instead of scaling the input works, but I'm curious if it can be done with a transform.

Answer 1

Its not the correct way to implement this material type input text. Use background-position on :focus, :valid on the bottom border of input.
You should use something like the snippet below:
input::-webkit-input-placeholder, button {
transition: all 0.3s ease-in-out;
}
input {
margin: 40px 25px;
width: 200px;
display: block;
border: none;
padding: 10px 0;
border-bottom: solid 1px #1abc9c;
transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
background-position: -200px 0;
background-size: 200px 100%;
background-repeat: no-repeat;
color: #0e6252;
}
input:focus, input:valid {
box-shadow: none;
outline: none;
background-position: 0 0;
}
input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {
color: #1abc9c;
font-size: 11px;
transform: translateY(-20px);
visibility: visible !important;
}
<input placeholder="Username" type="text" required="">
Hope this helps!

Answer 2

I think you would need to work with the width rather than using scale. This way the input will change width without applying any scaling to its content.
#searchInput {
text-decoration: none;
display: inline-block;
background-color: rgba(0, 0, 0, 0);
border: none;
border-bottom: 3px solid transparent;
width: 10px;
border-bottom-color: blue;
padding-left: 10px;
padding-bottom: 5px;
height: 40px;
font-size: 30px;
color: #307fff;
transition: 1s ease;
}
#searchInput:hover {
border-bottom: 3px solid blue;
/*
Instead of using scale just change the width
your transition will take care of animation
*/
width: 250px;
}
#searchInput:focus {
border-bottom: 3px solid blue;
width: 250px;
}
<input type="text" id="searchInput" name="search">