CSS：缩放文本字段，但不缩放文字

Question

是否可以在保持字体大小的同时仅在X轴上缩放文本输入？

我做了这样的事情：

#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">

结果是输入中间的光标和文本拉伸

做同样的动画改变宽度，而不是缩放输入作品，但我很好奇，如果它可以完成一个转换。

Answer 1

它不是实现这种材料类型输入文本的正确方法。 :focus,:valid上使用background-positioninput的下边框。

你应该使用类似下面的代码片段：

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="">

希望这有助于！

Answer 2

我认为你需要使用宽度而不是使用比例。这样，输入将改变宽度，而不对其内容应用任何缩放。

#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">