Alloy UI input label of different style

Question

I have a aui:input in my form with label First Name *. The current font color of the label is black now. What I want is the label First Name in black font and * in red color.

Does anyone know how to achieve this?

<aui:input model="<%= User.class %>"
           name="firstName"
           label="First Name *"
           showRequiredLabel=""
           value="<%=user.getFirstName() %>">
</aui:input>

Solution

You can specify the code like this:

<aui:input model="<%= User.class %>"
        name="firstName"
        showRequiredLabel=""
        label="First Name <span style='color: red;'>*</span>"
        value="<%=user.getFirstName() %>">
</aui:input>

<!--
or else you can also include a CSS Class as <span class="required">*</span> 
then you would need to add a style as:
-->

<style>

    .required {
        color: red;
    }

</style>

Or, you can do this instead:

<label class="aui-field-label" for="<portlet:namespace />firstName">
    First Name
    <span style="color: red;">*</span>
</label>

<aui:input model="<%= User.class %>"
        name="firstName"
        showRequiredLabel=""
        label=""
        value="<%=user.getFirstName() %>">
</aui:input>

Whichever is to your liking.