CSS for Forms with Selects

blabablaba

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

allan

Hi Steve,

ONE. CSS Alignment 'out of box' for Select

This is how it appears for me in Chrome:

If I remove the 4px padding it looks out of alignment. What browser and OS are you using?

TWO. Select field attribute 'required'

No - it will make no difference. Its actually going through jQuery's $().attr() method there rather than Editor itself adding that attribute.

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

Try this:

div.DTE_Field_Type_select div.DTE_Field_Input div.DTE_Field_InputControl select option[disabled] {
    color: #999999;
}

Allan