如何在PrimeFaces的inputText/inputNumber内添加图片？<p:inputText>需左图居中文字

很高兴帮你解决这个PrimeFaces组件的样式需求！下面分两部分详细说明实现方法：

一、如何在组件内部添加图片 #

有两种主流实现方式，各有适用场景：

1. 使用CSS背景图片（简洁高效） #

这种方式适合不需要交互的静态图标，直接通过CSS给输入框设置背景图，同时调整内边距避免文本覆盖图片：

<!-- 给inputText添加自定义样式类 -->
<p:inputText styleClass="input-with-icon" />
<!-- inputNumber同理 -->
<p:inputNumber styleClass="input-with-icon" />

对应的CSS样式：

.input-with-icon {
    /* 替换为你的图片路径 */
    background-image: url('/resources/images/your-icon.png');
    background-repeat: no-repeat;
    /* 控制图片位置：左对齐，垂直居中 */
    background-position: left 10px center;
    /* 左边留出足够空间，避免文本压到图片 */
    padding-left: 35px;
}

2. 使用PrimeFaces InputGroup组件（灵活可控） #

如果你需要图片可交互（比如点击事件），或者想更灵活地控制图标和输入框的布局，推荐用<p:inputGroup>，它可以直接把图标（或自定义图片）和输入框组合在一起：

<p:inputGroup>
    <!-- 自定义图片 -->
    <img src="/resources/images/your-icon.png" alt="提示图标" style="margin-left: 8px; vertical-align: middle;" />
    <p:inputText />
</p:inputGroup>

<!-- 如果用PrimeIcons官方图标，更方便 -->
<p:inputGroup>
    <p:icon name="pi pi-search" styleClass="ml-2" />
    <p:inputNumber />
</p:inputGroup>

二、实现图片左对齐 + 输入文本居中的效果 #

基于上面的两种方式，调整样式细节就能实现需求：

1. 基于CSS背景图的实现 #

只需要在之前的CSS里加上text-align: center即可：

<p:inputText styleClass="icon-left-centered-text" />

.icon-left-centered-text {
    background-image: url('/resources/images/your-icon.png');
    background-repeat: no-repeat;
    background-position: left 10px center;
    padding-left: 35px;
    /* 核心：让输入文本居中 */
    text-align: center;
}

2. 基于InputGroup的实现 #

需要调整InputGroup的布局，同时给输入框设置居中对齐：

<p:inputGroup styleClass="icon-left-input-group">
    <img src="/resources/images/your-icon.png" alt="图标" style="margin-left: 8px; vertical-align: middle;" />
    <p:inputText style="text-align: center;" />
</p:inputGroup>

对应的CSS（确保布局正确）：

.icon-left-input-group {
    display: flex;
    align-items: center;
}
/* 让输入框占满剩余空间，保证居中效果 */
.icon-left-input-group .ui-inputtext {
    flex: 1;
}

一些注意事项 #

• 图片路径要确认正确：如果是项目内的资源，用相对路径（比如/resources/icons/xxx.png）；如果是外部图片，直接填完整URL。
• 如果PrimeFaces的默认样式覆盖了你的自定义样式，可以用更具体的选择器（比如.ui-inputtext.icon-left-centered-text）或者添加!important（尽量少用，万不得已再用）。
• inputNumber组件的样式处理和inputText完全一致，直接替换标签即可。

内容的提问来源于stack exchange，提问作者Bear Au Jus - ジュースとくま