Custom color for Placeholder and Select

Design help Custom code
1

Hey friends - I changed the color of the select field to match the rest of the form using this code it looks great, but when you fill out the form, select an option from the dropdown, it submits the HEX# instead of the dropdown option. (screenshot)

Thanks for your help!

Here is my site Read-Only: [LINK][1]

2

hi @goodnightstudio I do not know when this article was written but these days you can use simple CSS that will change color of placeholder and color of selected option:

::placeholder {
	color: #347963;
}

select {
  color: #347963; 
}

DONE no JS needed

BTW: I see you are using for first option hidden. Why? It should be set like this.

<option disabled selected >-- SELECT ONE --</option>

the attribute disabled prevent this option and its value from to be a selectable option. when is not disabled and someone submit the form the “SELECT ONE” will be send as value of choice. This mean mean that you can set some logic that option has to be selected.

the attribute selected set this option value be visible on form load as first item. But I think that tis one is set with WF internally but not sure as I do not use WF Forms.

3

Hey @Stan - thank you for your response. I’m a designer pretending (learning) to be a developer lol. I’ve been just piecing things together with what I find on the internet.

It’s great to see there is a more simple option using CSS, though it’s annoying that you can update the Placeholder state in WF for Fields, but not Select Fields.

Can you walk me through exactly how/where I update that?

Thanks!

4

hi @goodnightstudio when you check rendered DOM with dev tools you can see that WF inject its own class w-select . Use this instead standardselect

.w-select{
   color: red;
}