How to change color of white form on white banner

• 

  jackcunha · Member · Feb 25, 2018 at 7:22 pm

  • Copy link
  • Add topic to favorites

  This code produces a white search input box, but it’s on a white background as well (header of https://cunhaholcomb.com). How do I change the color of the search bos to say light grey so that it stands out? Or any other suggested color?

  <form role=”search” method=”get” id=”search-form” action=”<?php echo home_url( ‘/’ ); ?>” >
  <label>
  <input type=”search” class=”search-field” placeholder=”<?php echo esc_attr_x( ‘Type here & press Enter to search this site’, ‘placeholder’ ) ?>” value=”<?php echo get_search_query() ?>” name=”s” title=”<?php echo esc_attr_x( ‘Search for:’, ‘label’ ) ?>” />
  </label>
  </form>

• 

  jackcunha · Member · Feb 25, 2018 at 7:40 pm

  • Copy link

  The other alternative would be to put a black or red border around the search box?

• 

  thesacredpath · Member · Feb 26, 2018 at 1:38 am

  • Copy link

  Hi @jackcunha, it looks like you are using WordPress but you are not hosted here at WordPress.com. These forum are for those hosted here at WordPress.com. For self-hosted WordPress sites such as yours, I would suggest asking for help from the theme vendor/author directly or ask in the volunteer-based WordPress.org forums.

  The differences between WordPress.com and WordPress.org.

  I took a quick look at your site, and the following custom CSS should get you on the way. You can edit the color codes as desired. I added a border to the search field as well.

  #search-form .search-field {
  	background-color: #ccc;
  	border: 1px solid #777;
  }