CSS: Scale text field without scaling text inside -

is possible scale text input on x axis while maintaining size of font?

i did 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 cursor on middle of input , text stretched

doing same animation changing width instead of scaling input works, i'm curious if can done transform.

its not correct way implement material type input text. use background-position on :focus, :valid on bottom border of input.

you should use snippet below:

input::-webkit-input-placeholder, button {    transition: 0.3s ease-in-out;  }    input {    margin: 40px 25px;    width: 200px;    display: block;    border: none;    padding: 10px 0;    border-bottom: solid 1px #1abc9c;    transition: 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 helps!