This another post is about af:query skinning , previously I have posted about changing 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::criterionaf|selectOneChoice::content {
width:207px;
font-weight:bold;
color:navy;
padding:5px;
}
af|query::criterionaf|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 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|querylabel[for*='qryId1:oper0:']{
color:#003194;
font-weight:bold;
font-family:cursive;
}
af|querylabel[for*='qryId1:oper1:']{
color:#003194;
font-weight:bold;
font-family:cursive;
}
and output is
Cheers :) Happy Learning
