How to change text color in search box?

[ApplianceJunk]

Here is the code I have for our header. It included the title and a search box.

Code Select Expand

global $context, $settings, $options, $txt , $scripturl;

echo '
<form  accept-charset="', $context['character_set'], '" action="', $scripturl, '?action=search2" method="post" style="padding: 0; text-align: center; margin: 0; margin-bottom: 5px;">

<table align="center">

<tr>
  <td height="5"></td>
</tr>

<tr>
          <td align="center" style="font-family:Arial; font-size:18pt; color:#336699; padding:1; padding-left:15; padding-bottom:0;" height="5"><a href="http://appliancejunk.com"><font color="#336699">ApplianceJunk.com</font></a></td>
         </tr>

<tr>
          <td align="center" style="font-family:Arial; font-size:10pt; padding:1; padding-left:15; padding-bottom:0;" height="5">Appliance Repair Forum</td>
         </tr>

<tr>
  <td height="25"></td>
</tr>

<tr>
  <td align="center"><input type="text" name="search" value="Search: ApplianceJunk.com" onfocus="if
(this.value==this.defaultValue) this.value=\'\';" size="31" maxlength="100" style="color:#A7A7A7"></td>
          <td><input type="image" src="http://www.appliancejunk.com/imgs/search.gif" alt="Search" width="20" height="16">
<input type="hidden" name="advanced" value="0" />
  </td>
</tr>

<tr>
  <td height="25"></td>
</tr>

</table>

</form>';

When you first view it the text box has "Search: ApplianceJunk.com" already in it in a light gray (#A7A7A7) color.
When you click on the text box to enter your own text "Search: ApplianceJunk.com" disappears.

Then the text you type in is also a light gray (#A7A7A7), but I would like the text you type in to be black.

I have been looking at different examples online and trying to study the code as to how this is done, but I just can't seem to get it working with my code.

One example I found on how I want it to work can be found here on the left side were the search box say's "Find ATM's".

https://www.wellsfargo.com/

There it say's "Enter Zip code or City & State" in light gray, but the text you type in the search box is black.

The code I can view from that example seems to be using this.

Code Select Expand

<input size="28" maxlength="70" id="location" name="location" value="Enter Zip code or City &amp; State" title="Find atms/locations" style="float: left; width: 147px;" onclick="this.select();this.style.color='#000';" onfocus="this.select();this.style.color='#000';" type="text">

So I try adding this part to my code a number of different ways.

Code Select Expand

onclick="this.select();this.style.color='#000';" onfocus="this.select();this.style.color='#000';"

but nothing seems to work with the way I add it.

Could someone point me in the right direction to get my code to work?

Thanks,
AJ

[Sentinel [AF]]

Hmmm ...

I changed mine from white to yellow via admin > current theme > style.css.

Find: style.css

Code Select Expand

/* The search input field in the header.*/
.search-input
{
   background-color: #181818;
   border: 1px solid #000000;
   color: yellow;
   font-size: 11px;
   line-height: 14px;
   padding: 3px 4px 3px 4px;
   width: 199px;
   margin-left: 20px;
}

Where it says [ color: yellow; ] ...
Replace it simply with "black" or you can use the # format which is "#000000"

I've nae clue if I've understood what you were asking for but that's where I edited the colors for the search box.

eZ.