0

I'm trying to change the color of an input placeholder (from white to black) for a search box with CSS and it's not working.

I've tried this method:

input.search-field.fill_inited::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #000000 !important;
}

input.search-field.fill_inited::-moz-placeholder {
  /* Firefox 19+ */
  color: #000000 !important;
}

input.search-field.fill_inited:-ms-input-placeholder {
  /* IE 10+ */
  color: #000000 !important;
}

input.search-field.fill_inited:-moz-placeholder {
  /* Firefox 18- */
  color: #000000 !important;
}
<input type="search" class="search-field fill_inited" placeholder="Search …" value name="s">

The URL in question is: http://pacificlib.design-active.com/oregon-congressman-les-aucoin-library-archives-exhibit/. This is a WordPress site and the search box is in the blog sidebar.

Lastly, I'm also open to a JavaScript solution.

Mark Rotteveel
  • 100,966
  • 191
  • 140
  • 197
user5566016
  • 1
  • 1
  • Let me start by saying whoever closed this question obviously did not read my question fully because I already tried the solution that I was referred and it did not work. So again, can someone take a closer look at my question? – user5566016 Jul 09 '22 at 22:33
  • https://codepen.io/umairfarooqlone/pen/MWVeWxY – UmairFarooq Jul 10 '22 at 02:33
  • @user5566016 Could you explain why that solution in the reference link didn't work for you?? – g78 Jul 11 '22 at 10:12
  • I'm not sure why the code is not working when I add it to my CSS. That's exactly why I'm asking for help. Whenever I've styled a placeholder on other sites I've worked on it has worked no problem. I've also used Codepen to test the code and it works there but not when I add it to my site's CSS. I'm starting to wonder if it's a weird Wordpress issue. – user5566016 Jul 12 '22 at 21:30
  • The only other thing I can add is that it doesn't work in any browser. – user5566016 Jul 12 '22 at 21:37
  • Sounds like you might have a different CSS rule that's overriding this one in your site specifically, or some other issue directly related to your site. Unfortunately you've proven this is the solution with your CodePen, but something specific to your site is causing your current problem. Spend time walking through your code and try disabling some CSS rules if needed. Also ensure that this CSS rule is the LAST to load for your site (not just last in the file). If you discover more specific reasoning you need help with feel free to ask another question. Best of luck in your search. – SnareChops Jul 14 '22 at 17:38

0 Answers0