Format Placeholder text in dropdown
Hi - is there a way to format the placeholder text that appears in a dropdown?
This would be similar to what can be done in a Text Input, where the placeholder text color can be specified in the skin. I am looking for the same functionality for dropdowns.
***Updated by Moderator: Lochan. Removed user added #helpme tag. Apologies for confusion, shouldn't have been an end-user option***
Accepted Solution
Sun Life
CA
That's a good way to format the selected option, but I was looking for a way to differentiate the first (placeholder) selection versus the rest of the items in the list.
In the end I used JQuery to change the class when a change occured:
$(document).on("change", "select#DOBMonth", function() {
$("select#DOBMonth").removeClass("standard_with_placeholder");
$("select#DOBMonth").addClass("standard_with_placeholder_postChange");
});
$("select#DOBMonth").change();
$(document).ready( function() {
if ($("select#DOBMonth").val() != "" ){
$("select#DOBMonth").removeClass("standard_with_placeholder");
$("select#DOBMonth").addClass("standard_with_placeholder_postChange");
}
});
Then use the first-child pseudoselector to get at the placeholder option:
select.standard_with_placeholder_postChange{
color: black;
}
select.standard_with_placeholder option{
color: black;
}
select.standard_with_placeholder option:first-child,
select.standard_with_placeholder option_postChange:first-child{
color: #999;
}
Pegasystems Inc.
IN
Hi,
Could you try adding the below style in UserWorkform and check?
<style>
#pyWorkPageChoice option:checked
{ color: red; }
</style>
# pyWorkPageChoice is the ID for the dropdown at my end. You need to replace it with the ID of your dropdown.
I have attched a document with screenshots for you.
Regards,
Gisela
Pegasystems Inc.
IN
Hi,
Could you add the below style in UserWorkform and test?
<style>
#pyWorkPageChoice option:checked
{ color: red; }
</style>
pyWorkPageChoice is the ID for the dropdown at my end. You need to replace it with the ID of your dropdown.
I have attached a document with screenshots for you.
Regards,
Gisela
Accepted Solution
Sun Life
CA
That's a good way to format the selected option, but I was looking for a way to differentiate the first (placeholder) selection versus the rest of the items in the list.
In the end I used JQuery to change the class when a change occured:
$(document).on("change", "select#DOBMonth", function() {
$("select#DOBMonth").removeClass("standard_with_placeholder");
$("select#DOBMonth").addClass("standard_with_placeholder_postChange");
});
$("select#DOBMonth").change();
$(document).ready( function() {
if ($("select#DOBMonth").val() != "" ){
$("select#DOBMonth").removeClass("standard_with_placeholder");
$("select#DOBMonth").addClass("standard_with_placeholder_postChange");
}
});
Then use the first-child pseudoselector to get at the placeholder option:
select.standard_with_placeholder_postChange{
color: black;
}
select.standard_with_placeholder option{
color: black;
}
select.standard_with_placeholder option:first-child,
select.standard_with_placeholder option_postChange:first-child{
color: #999;
}