處理新產品的訂購表，其中一列是指定產品的RAL顏色。

我想有固定的文本，用戶不能刪除，所以他們所要做的就是輸入一個四位數后，這與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; 
}
.input {
    display: block; 
    border: 1px solid #d7d6d6; 
    background: #fff;
    padding: 10px 10px 10px 20px;
    width: 195px;
}
.ral-placeholder {
    position: absolute; 
    display: block;
    left: 5px; 
    top: 3px; 
    z-index: 9;  
}

任何關于這方面的幫助都將不勝感激，因為我對“復雜”編碼相當陌生。

不要把靜態文本放在輸入里面，放在輸入之前。你可以把它設計成& quot出現& quot通過移除邊框/輪廓/等位于輸入內部。并將其添加到包含元素中。例如:

.lst-input-ral-box {
  border: 1px solid #d7d6d6;
}
.lst-input-ral-box:focus-within {
  border: 1px solid #000;
}
input {
  border: none;
  outline: none;
}

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

如果我沒理解錯的話，你想在& quotRAL & quot；不變對嗎？

是這樣，你應該更換

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

使用:

<label for="ral" class="ral-placeholder">RAL</label>
<input type="text" value="" id="ral" name="ral" maxlength="4" autofocus="autofocus">