How to Style the Search Placeholder Text

  • d7ac

    (@d7ac)


    7 years, 1 month ago

    Hi,

    I am unable to change the color of the search placeholder text “Search Products…”.
    Current color seems to be something like #A9A9A9, which is not any good on a dark background of the search bar.

    Regards

Viewing 3 replies - 1 through 3 (of 3 total)
  • stephencottontail

    (@stephencottontail)

    7 years, 1 month ago

    Can you post a link to your site?

    Thread Starter d7ac

    (@d7ac)

    7 years, 1 month ago

    Link to website

    I’m keeping the search area white for now, but would make it blend into the background more if only I could get the placeholder text to be white.

    Thanks for the quick response, I hope you can figure it out! 🙂

    stephencottontail

    (@stephencottontail)

    7 years, 1 month ago

    .site #masthead .site-search input::-webkit-input-placeholder {
	color: #fff;
}

.site #masthead .site-search input:-moz-placholder {
	color: #fff;
}

.site #masthead .site-search input::-moz-placeholder {
	color: #fff;
}

.site #masthead .site-search input:-ms-input-placeholder {
	color: #fff;
}

    Since you’re already using a child theme, you could use this code right in your child theme’s stylesheet. Alternatively, if you’re using WordPress 4.7, there’s a custom CSS option at Dashboard > Appearance > Customize > Additional CSS.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to Style the Search Placeholder Text’ is closed to new replies.

Tags