Twenty Fourteen: Search Bar Widget style is very dark

[RDall]

The search bar in the Twenty Fourteen primary sidebar is very dark. Almost invisible against the black background of Twenty Fourteen.

See Screenshot:
​http://cl.ly/image/0E223U3N2w3g

Suggested solution is to increase the contrast of the text and border so people know the search bar is there.

I'll be submitting the patch shortly :-)

[RDall]

Put in style specific to widget search form and placeholder text to improve readability.

[iamtakashi]

If we are going to change the style, we should change all input and textarea for the sidebar rather than specifically for the search widget.

[RDall]

In some of the ​documentation I looked up on placeholder the colour was either a hex code or a color. I never saw the use of the rgba in any of the examples.

What was happening was the placeholder couldn't read the rgba style.

In conversation with iamtakashi on IRC I said I wanted to keep to his colours implemented but this caused confusion as that is what I was over writing in my patch.

I had used the hex instead of the rgba because the rgba wasn't highlighted properly in my code editor. see screenshot ​http://cl.ly/image/3G302O3F1W3W. So I automatically switch to Hex without even thinking about the actual issue.

This second patch translates the rgba to a hex colour so the placeholder can properly have iamtakashi previous style applied but in a hex format that can be read by the placeholder.

Also I did increase the opacity of the border around the search bar as I though it was a little lost as well.

[RDall]

Translates rgba to hex for placeholder extension

[RDall]

Disregard last diff I hadn't committed the local change I made and when I ran the diff it took from the previous version.

[iamtakashi]

Sorry if I wasn't clear but we should change all input and textarea in the sidebar if we change it.

Anyway, after a bit of research, it turns out placeholder text gets lower opacity by default from Firefox 19 and that was why it appeared darker than how it should be. So the appropriate fix is explicitly setting opacity: 1; for ::-moz-placeholder ​Ref.

I lighten a bit of the placeholder text on top of that, but for the border, I don't want lighten it too much so I changed it to the same with the color of the border used in the sidebar: rgba(255, 255, 255, 0.2) and rgba(255, 255, 255, 0.3) for hover.

[lancewillett]

In 26116:

Twenty Fourteen: fix low-contrast input elements in Firefox by explicitly setting opacity: 1 for the placeholder text. Also brighten the border styles a bit. Props iamtakashi, fixes #25930.

[alexdobras]

is there a way to change the placeholder "Search..." with anything else? Please give me a short how-to. thanks!

[RDall]

Alex

You might want to ask your question in the ​WordPress.org support forums and research in the codex on ​child themes.

Trac is not for support requests but is for building WordPress itself. But it's totally possible with a child theme. Good Luck.