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

Offline ApplianceJunk

  • SMF Hero
  • ******
  • Posts: 3,476
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">

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

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

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

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

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

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



When you first view it the text box has "Search:" already in it in a light gray (#A7A7A7) color.
When you click on the text box to enter your own text "Search:" 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".

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=";'#000';" onfocus=";'#000';" type="text">
So I try adding this part to my code a number of different ways.

Code: [Select]
onclick=";'#000';" onfocus=";'#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?


Offline Sentinel [AF]

  • Semi-Newbie
  • *
  • Posts: 85
  • Gender: Male
  • Mr Grumpy
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.*/
   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.