Change Search Widget Text Color

• 

  davidgpl · Member · Apr 9, 2016 at 9:17 pm

  • Copy link
  • Add topic to favorites

  When visitors utilize the “search” function on my site, they can’t see what they’re typing – it goes completely blank.

  I’ve noticed that if typed text is highlighted it can be seen, so I’ve determined it’s defaulting to white type, on a white background. I’d like gray text against the white background.

  I’m using a search widget in the Apostrophe theme… I’m sure it’s something easily fixed by CSS, but I don’t know how, so would love something I could copy and paste in to fix it.

  Thanks!

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

• 

  charliescheer · Member · Apr 9, 2016 at 10:27 pm

  • Copy link

  Hello,

  To change the color of the text in your search field add this text to your CSS.

  .search-field {
  color: #666;
  }

  That should change the color of the text to gray.
  Hope that helps, let me know if you have any questions.

• 

  davidgpl · Member · Apr 11, 2016 at 12:38 pm

  • Copy link

  Hey Charlie,

  Thanks for your response! With that code information, I can see the color of the text after I click out of the box (if I click elsewhere on the page), but I still can’t see anything as I’m typing. The search box outlining itself disappears, and my text is invisible until I click out, when (now – thank you!) it turns to gray.

  Any clue what might be causing this?

• 

  thesacredpath · Member · Apr 12, 2016 at 12:39 am

  • Copy link

  Hi there, give the following a try. The first rule is the text color and the second is the border color.

  input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus {
      color: #888;
  }
  input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus {
      border-color: #ccc;
  }

• 

  davidgpl · Member · Apr 12, 2016 at 1:23 am

  • Copy link

  Thanks for your help, but this isn’t fixing it either. I still can’t see what I’m typing as I’m typing – only once I click outside of the box.

  As soon as I click in the box to type, the outline goes away and I can’t see it or the letters I’m typing. Any clue what’s going on?

• 

  thesacredpath · Member · Apr 12, 2016 at 2:26 am

  • Copy link

  @davidgpl, I’ve tried your site in Chrome, Firefox and in Safari and I can see the text in the search box as I type it in. Could you verify you are talking about this site http://fourthandsycamore.com/ ?

  Also, try clearing your browser cache and then try again. Also, can you try in a different browser if clearing your cache doesn’t work?

  And one more thing, are you not seeing it on your desktop machine, or on a phone or tablet, and if so, which one and which version of the OS?

• 

  davidgpl · Member · Apr 12, 2016 at 12:13 pm

  • Copy link

  It wasn’t showing up when I was trying last night in chrome on my desktop, but it must have been the cache, because it seems to be working perfectly now.

  Thanks!

• 

  thesacredpath · Member · Apr 12, 2016 at 7:32 pm

  • Copy link

  Awesome, and you are welcome.