CSSで入力フィールドの一部のみを使用

Question

私は入力フィールドを持っています。その右側には、ユーザーに情報を表示する文字列があります。

<div class="my_div_class"> 
    <input class="my_input_class" type="text" placeholder="Search"> 
    <span class="my_span_class">6000 available</span> 
</div> 

相対位置と絶対位置を使用して、入力フィールド内にスパンを配置します。

ただし、ユーザーが長いクエリを入力すると、テキストはスパンテキストの下になります。

ユーザーが右余白の前のポイントに達したら、入力フィールドに水平スクロールを強制する方法がありますか？理想的にはjavascriptを使用しないでください。

Answer 1

padding-rightを入力ボックスに追加できます。

.my_div_class { 
 
    position: relative; 
 
    width: 200px; 
 
} 
 
.my_input_class { 
 
    width: 100%; 
 
    padding-right: 100px; 
 
    box-sizing: border-box; 
 
} 
 
.my_span_class { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
}

<div class="my_div_class"> 
 
    <input class="my_input_class" type="text" placeholder="Search"> 
 
    <span class="my_span_class">6000 available</span> 
 
</div>

Answer 2

.my_input_class { 
    padding-right: 1em; // Replace `1em` with the desired amount of padding 
}