如何为网页RAL颜色输入框添加不可删除固定文本并解决输入覆盖问题

• 先修正CSS选择器：你写的.input选不到目标输入框，因为你的input标签只有id="ral"，没加class="input"，所以把.input改成#ral才能选中这个输入框。
• 调大输入框的padding-left值，给左侧的"RAL"文本留出足够空间，避免输入内容覆盖它。
• 微调固定文本的位置，让它和输入框内的文字垂直对齐。

HTML（无需改动，保持原样） #

<td class="lst-input-ral-box">
     <input value="" id="ral" maxlength="4" autofocus="autofocus">
     <span class="ral-placeholder">RAL</span>
</td>

修改后的CSS #

.lst-input-ral-box {
   position: relative; 
}
#ral { /* 替换选择器为#ral，匹配输入框的id */
    display: block; 
    border: 1px solid #d7d6d6; 
    background: #fff;
    padding: 10px 10px 10px 45px; /* 增大左侧内边距，给RAL文本预留位置 */
    width: 195px;
}
.ral-placeholder {
    position: absolute; 
    display: block;
    left: 15px; /* 调整水平位置，和输入框内文字对齐 */
    top: 50%; /* 结合transform实现垂直居中 */
    transform: translateY(-50%);
    z-index: 9;  
    color: #666; /* 可选：给固定文本加浅灰色，和输入内容区分 */
}

额外优化：如果要限制用户只能输入数字，可以给input加属性，比如：

<input value="" id="ral" maxlength="4" autofocus="autofocus" type="number" inputmode="numeric">

内容的提问来源于stack exchange，提问作者alistair.oakes