兄弟のテキストに基づく入力のサイズを変更します。

Question

私はinputの要素にテキストを続けています。たとえば：

<input type="email" required/> simple text 

私は、テキストのサイズに応じてinputの幅を変更する必要があります。さらに多くのテキストがある場合は、入力の幅が縮小されます。

これは、旧式のブラウザではフレックスやCSSで可能ですか？また、入力の幅は、それ自体の値ではなく、その隣のテキストにのみ依存します。

Answer 1

スニペットをご覧ください。これがあなたが探しているものであることを願っています。私はスパンであなたのテキストコンテンツをラップしました。ラッピングせずに所望の効果を達成することは不可能である。

フレックスアイテムに 初期設定はmin-width: autoであるように、各アイテムは、容器内に留まるためにはflex-shrinkテキスト項目のいずれと 入力ボックスのmin-width: 0を使用していません。

.wrapper{ 
 
    display: flex; 
 
    display: -webkit-flex; 
 
    margin: 20px 0; 
 
    background: #ddd; 
 
    padding: 10px; 
 
    width: 200px; 
 
} 
 
span{ 
 
    flex-shrink: 0; 
 
} 
 
input { 
 
    min-width: 0; 
 
}

<div class="wrapper col-md"> 
 
    <input type="email" required/> <span>simple text is</span> 
 
</div> 
 

 
<div class="wrapper col-md"> 
 
    <input type="email" required/> <span>simple text is another text</span> 
 
</div>