Primefaces 样式应用于 <span> 而不是 <input>答案

【问题标题】：Primefaces style is applied on <span> instead of <input>Primefaces 样式应用于 <span> 而不是 <input>
【发布时间】：2013-04-24 08:35:46
【问题描述】：

我正在使用日历和自动完成功能的屏幕上使用 primefaces

我从设计师那里得到 UI 并开始集成，我分配了这样的样式

<p:calendar styleClass="xyz" />

输出是

<span id="bla" class="xyz" >
    <input type="text" class="some other classes here" />
</span>

所以我的样式都失败了

现在我需要直接在输入上应用样式而不是跨度

【问题讨论】：

标签： css input primefaces styles html

【解决方案1】：

你能通过重新排列你的 CSS 来解决它吗？：

.xyz input {
/* some weird styling here */
}

【讨论】：

这不是一个解决方案......只是设计师将更新他的原型，我需要将每一个更改复制并粘贴到我的 css 中......这是他们的问题跟踪器和问题提出的解决方案被关闭为“不修复”
马克的回答是正确的，它实际上是解决方案。替代方法是覆盖 .ui-inputfield.hasDatepicker css 选择器。
好的，没关系..我现在想到的所有解决方法，谢谢大家

【解决方案2】：

例如，如果您依赖 Bootstrap CSS，这是有问题的。表单控件需要类form-control，但是当您为p:calendar 添加styleClass="form-control" 时，周围的跨度将获取类而不是输入，这完全与设计相混淆。我认为p:calendar 标签应该有一个inputStyleClass 属性，就像p:dataTable 有一个tableStyleClass 标签一样。

【讨论】：

【解决方案3】：

这对我使用 jQuery 将表单控件类添加到输入字段很有用：

$(".mycalendar input:first-child").addClass("form-control");

p:calendar id="date1" value="#{bean.date1}" styleClass="mycalendar" />

【讨论】：

【解决方案4】：

如果你正在使用材料设计，你可以使用这个技巧：

:host /deep/ .ui-inputtext{
   /* Your Crazy Custom Style*/
}

【讨论】：