Styling Input components inside af:query using ADF Skin

This another post is about af:query skinning, previously I have posted about changing the style of af:query buttons

ADF Skinning : Change color and style of af:query buttons in ADF Faces (Jdev 12.1.3)

Now this post is about styling input components inside af:query, Sometimes we need to change color, width, fonts of inputText, selectOneChoice that are inside af:query and that time simple skin selector doesn't do the job



Here I am sharing a simple example of styling af:query input components, A typical af:query components looks like this

and to change DepartmentId selectOneChoice and ManagerId inputText's content style we can use this CSS

af|query::criterion af|selectOneChoice::content {
    width: 207px;
    font-weight: bold;
    color:navy;
    padding:5px;
}
af|query::criterion af|inputText::content {
    width: 200px;
    font-weight: bold;
    color:red;
    padding:5px;
}

and after using this CSS af:query looks like this

Now changing labelStyle is a bit tricky, for that we have to inspect generated HTML code of component on the browser and find correct tag so that we can alter CSS of that tag

Now we have Id of the component and we know the tag that should be altered, Use this CSS to change label style of components

af|query label[for*='qryId1:oper0:']{
    color:#003194;
    font-weight:bold;
    font-family: cursive;
}

af|query label[for*='qryId1:oper1:']{
    color:#003194;
    font-weight:bold;
    font-family: cursive;
}

and output is

Cheers :) Happy Learning