Question

以一个示例为例，考虑以下带有质数输入组件的简单形式：

<h:form id="person">

    <h:panelGrid columns="2">

        <p:outputLabel for="inputFN" value="First Name"
            indicateRequired="auto" />
        <p:inputText id="inputFN" required="true"
            placeholder="First Name right here please." />

        <p:outputLabel for="inputLN" value="Last Name"
            indicateRequired="auto" />
        <p:inputText id="inputLN" required="true"
            placeholder="Last Name right here please." />

        <p:outputLabel for="inputBD" value="Date of Birht"
            indicateRequired="auto" />
        <p:calendar id="inputBD" required="false"
            placeholder="Please kindly let us know the very starting point in time of your existence!" />

        <p:outputLabel for="inputFC" value="Favourite Color"
            indicateRequired="auto" />
        <p:inputText id="inputFC" required="false"
            placeholder="What is your favourite colour?? Green? Yellow? Please!" />

        <p:outputLabel for="inputFH" value="Favourite Hobby"
            indicateRequired="auto" />
        <p:autoComplete id="inputFH" required="true"
            placeholder="Your favourite hobby? Stackoverflow I bet!" />

    </h:panelGrid>
    (*) these fields are vital! Don't even think about submission when empty!

</h:form>

inputFN（必需），inputFC（不是必需）和inputFH（必需）的渲染输出看起来像这样：

<input id="person:inputFN" name="person:inputFN" type="text" placeholder="First Name ..." aria-required="true"
    class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all"
    role="textbox" aria-disabled="false" aria-readonly="false">

<input id="person:inputFC" name="person:inputFC" type="text" placeholder="What is your favourite colour?..."
    class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all"
    role="textbox" aria-disabled="false" aria-readonly="false">

<input id="person:inputFH_input" name="person:inputFH_input" type="text"
    class="ui-autocomplete-input ui-inputfield ui-widget ui-state-default ui-corner-all ui-state-error"
    autocomplete="off" placeholder="Your hobby? ..." value="" role="textbox"
    aria-disabled="false" aria-readonly="false" aria-autocomplete="list">

我没有机会让CSS选择器仅捕获必填字段。请注意，并非所有必需的组件都会得到@Malloware建议使用的aria-required="true"。例如p:autocomplete inputFH不会。

由于我们有大量输入组件分布在视图和（嵌套的）复合组件中，required属性有时是动态确定的，而且我很懒，我想不每个组件，并向其中添加一个styleClass="#{something.isRequired ? 'required' : ''}"。

是否有一种干净的方法可以全局启用客户端对必填字段和可选字段的区分？

我最后要达到的目标是用颜色突出显示所有必填字段的占位符（使用::placeholder CSS占位符，作为indicateRequired善意提供的p:outputLabel的补充

Answer 1

只需使用此CSS选择器即可。确保适用于PF 7.0或更高版本的所有PF输入字段。

input[aria-required="true"] {
   color: red;
}

如何全局设置已设置required =“ true”的所有PrimeFaces输入组件的样式

1 个答案: