Spring Boot Thymeleaf下如何仅为input内${keyword}文本设置背景色

原生<input>是浏览器内置渲染的表单控件，所有直接作用在input标签上的background-color样式，都会直接覆盖整个输入框的渲染区域，没办法直接穿透到输入框内部，给某一段特定文本（也就是你绑定的${keyword}对应内容）单独设置局部背景。你现在把带背景色的.container类直接挂在input标签上，自然会出现整个输入框全被染绿的效果。

要实现“仅给回显的${keyword}文本加背景、不改动输入框整体底色”的效果，需要调整页面结构，利用层级叠放实现样式分离，适配Thymeleaf的渲染逻辑，具体代码如下：

调整后的CSS代码 #

/* 外层容器：做居中对齐，承载输入框和高亮层 */
.input-wrapper {
    position: relative;
    width: 500px;
    margin: 0 auto;
    font-size: 20px;
}

/* 高亮层：专门渲染带背景的关键词，放在输入框下层 */
.highlight-layer {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 0;
    color: blue;
    font-size: 20px;
}

/* 仅给关键词文本加绿背景 */
.keyword-highlight {
    background-color: green;
    padding: 2px 1px;
}

/* 真实输入框：设置透明背景，浮在高亮层上方 */
.real-input {
    position: relative;
    z-index: 1;
    width: 100%;
    background: transparent; /* 输入框本身无底色，不会遮挡下层高亮 */
    border: 1px solid #d0d0d0;
    font-size: 20px;
    padding: 5px;
    box-sizing: border-box;
}

调整后的适配Thymeleaf的HTML代码 #

<!-- 外层定位容器 -->
<div class="input-wrapper">
    <!-- 下层高亮渲染层：用Thymeleaf渲染后端传的关键词，仅给关键词套带背景的标签 -->
    <div class="highlight-layer" th:if="${keyword != null}">
        其他普通文本片段
        <span class="keyword-highlight" th:text="${keyword}"></span>
        其他普通文本片段
    </div>
    <!-- 保留真实输入控件的表单功能 -->
    <input 
        class="real-input" 
        type="text" 
        name="keyword" 
        id="keyword" 
        size="50" 
        th:value="${keyword}" 
        required
    />
</div>

• 两层结构完全对齐时，上层输入框因为背景透明，会露出下层的高亮文本，既保留了input原本的表单提交、输入交互、Thymeleaf回显的能力，又能精准实现仅给${keyword}文本加绿色背景的效果，不会染绿整个输入框。
• 如果场景不需要在高亮后保留输入功能，仅需要文本回显，直接去掉input，用div渲染内容，把${keyword}套在带背景色的span标签里即可，实现逻辑更简单。
• 原生input没有任何CSS属性可以直接给内部的部分文本单独设置背景，这是浏览器对原生表单控件的渲染限制，通过单层CSS绑定在input上永远达不到目标效果。

内容的提问来源于stack exchange，提问作者Rajdeep Das