Hi Allan,

ONE. CSS Alignment 'out of box' for Select

Including selects in standard forms results in the selects being rendered slightly out of vertical line with the centre line of the row.
To fix, I adjusted the css as follows:

div.DTE_Field_Type_select div.DTE_Field_Input {
    padding-top: 4px;
}
// change to:
div.DTE_Field_Type_select div.DTE_Field_Input {
    padding-top: 0px;
}

I'm not sure if the padding-top has any other use I'm not seeing, however, if there is no adverse effect, then the above worked better for me so I'm sharing in case it's useful for you.

TWO. Select field attribute 'required'

I have defined a select as follows:

//...
            , {
                label: "Gender:",
                name: "gender",
                type: "select",
                placeholder: 'Select gender identity',
                attr: {
                    required: ''
                }
            }
//...

I note that Datatables renders the select tag with <select required="required">. I understand that the correct syntax is <select required>. Does it matter though? Will this have any impact across browsers?

THREE. How to get the Select placeholder to format as 'grey' placeholder text?

I am following the useful example given on Stack Overflow:

https://stackoverflow.com/questions/13694271/modify-select-so-only-the-first-one-is-gray

Implementing, I have the following CSS:

div.DTE_Field_Type_select div.DTE_Field_Input div.DTE_Field_InputControl > select:invalid, select option[value=""] {
    color: #999999;
}

The problem I encounter using the above code (which works in the SO demo) is that the CSS renders every option within the Datatables select with 'grey' placeholder text. Ideally I want only the placeholder text to appear 'grey'.

I understand that for the CSS to work, the placeholder needs to include value="". Datatables does not include a value in the placeholder option. In that case, how would I modify the CSS to ensure only the placeholder appears in grey?

Kindest regards,

Steve