Advertisement:

Author Topic: How to change text color in search box?  (Read 10820 times)

Offline ApplianceJunk

  • SMF Hero
  • ******
  • Posts: 3,382
    • ApplianceJunk.com
How to change text color in search box?
« on: July 26, 2008, 08:18:16 AM »
Here is the code I have for our header. It included the title and a search box.

Code: [Select]
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]
<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]
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
If you don't write your own rules, someone else will. And the results won't be pleasant.

Offline Sentinel [AF]

  • Semi-Newbie
  • *
  • Posts: 85
  • Gender: Male
  • Mr Grumpy
    • alternatingfrequencies.com
Re: How to change text color in search box?
« Reply #1 on: July 29, 2008, 06:06:23 PM »
Hmmm ...

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

Find: style.css
Code: [Select]
/* 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.