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をinputに使用してください。

は、あなたは以下のスニペットのようなものを使用する必要があります。

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