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

Question

我正在使用日历和自动填充

的屏幕上使用primefaces

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

<p:calendar styleClass="xyz" />

输出

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

所以我的风格都失败了

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

Answer 1

你可以通过重新排列CSS来解决它吗？：

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

Answer 2

如果您依赖Bootstrap CSS，这是有问题的。表单控件需要类form-control，但是当您为styleClass="form-control"添加p:calendar时，周围的跨度会获取类而不是输入，这完全会影响设计。我认为inputStyleClass代码应该有p:calendar属性，就像tableStyleClass的{​​{1}}代码一样。

Answer 3

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

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

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

Answer 4

如果使用材料设计，可以使用此技巧：

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