Seacrh bar hover color and text color

• 

  incellp · Member · Apr 11, 2017 at 2:08 pm

  • Copy link
  • Add topic to favorites

  Hi

  https://stannmarine.wordpress.com/

  When I hover over the blue search it comes up brown, I want it to stay blue.

  Also how do I make the word ‘search’ appear in white?

  Thanks

  The blog I need help with is: (visible only to logged in users)

• 

  otpidusprime · Member · Apr 11, 2017 at 2:30 pm

  • Copy link

  Hello @incellp,
  You can do that by customizing CSS, which is a part of the premium and business WordPress.com plans.

  Read more about these plans here:
  https://wordpress.com/pricing/

  If you have already upgraded your account to any one of these plans, then you can go to My Sites → Customize(Beside the Themes option). This will open up the site customizer. On the sidebar of the customizer, click the CSS tab to access the CSS editor when you can put custom CSS codes.

  Read more about it here:
  https://en.support.wordpress.com/custom-design/editing-css/

  Here are the CSS code that you will need:

  .widget_search .search-submit {
      color: #ffffff;   //change the search text color to white
  }
  
  .widget_search .search-submit:hover {
      color: #ffffff;   //keep the search text white when hovered
      background-color: #1b408e;   //keep the button blue when hovered
  }
  
  .widget_search .search-submit:hover {
      border-color: #1b408e;   //keep the border blue when hovered
  }

  Hope this helps :)

  Request to Moderator: Please move this topic to the CSS sub-forum.

• 

  incellp · Member · Apr 11, 2017 at 2:33 pm

  • Copy link

  Awesome thank you very much for the quick response.

• 

  otpidusprime · Member · Apr 11, 2017 at 2:37 pm

  • Copy link

  Glad i could help :)

• 

  incellp · Member · Apr 25, 2017 at 4:25 pm

  • Copy link

  how do i do this for password button on client login page?

• 

  otpidusprime · Member · May 11, 2017 at 7:48 pm

  • Copy link

  @incellp i apologize for the delay in my response.

  Here’s the CSS code:
  1. Keep the text white when hovered:

  input[type="submit"]:hover {
      color: #ffffff;
  }

  2. Keep the button blue when pressed:

  input[type="submit"]:active {
      background: #1b408e;
  }

  Hope these help 🙂