Hi Dilip,
The approach you took is the correct one by using a drop down widget. You can hide the arrow by applying some custom css. You can add .dropdown-hide-arrow class to the element and add the following css:
select.form-control.dropdown-hide-arrow {
background-image: none;
}
If this behavior is application-wide, you can just apply the styling to all disabled form selects, this way you don’t need to add the class to the widget:
select.form-control[disabled] {
background-image: none;
}