我正在嘗試進行這樣的文本輸入，其中右側有永久文本，左側有可替換文本
任何的想法？
uj5u.com熱心網友回復：
嘗試這樣的事情。您還可以使用類名定位元素。我添加了一些寬度和填充到input. 根據您的要求更改它。
label {
position: relative;
}
label span {
position: absolute;
right: 0;
top: 0;
padding-right: 10px;
color: grey
}
input {
padding-right: 40px;
width: 150px;
}<label><span>bhat</span>
<input type="text" placeholder="0.00" />
</label>uj5u.com熱心網友回復：
除了@kiranvj 所說的，我只是添加了 JS 來根據輸入隱藏和顯示浮動文本：
function hideSpan(x) {
document.querySelector('.fp').style.display = x.value !== "" ? "none" : "block";
}label {
position: relative;
}
label span {
position: absolute;
right: 0;
top: 0;
padding-right: 10px;
color: grey;
user-select: none;
cursor: text;
}<label><span class="fp">bhat</span>
<input type="text" placeholder="0.00" oninput="hideSpan(this)"/>
</label>uj5u.com熱心網友回復：
使用位置絕對跨度到文本框實作。
.input-with-txt {
position: relative;
display: inline-block;
}
input {
padding: 10px;
padding-right: 45px;
}
.input-with-txt > span {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: #aaa;
}<div class="input-with-txt">
<input type="text" placeholder="0.00" />
<span>baht</span>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/412964.html
標籤：
上一篇：如何格式化單選輸入標簽中的文本？