Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Anoying background color on my input fields

Status
Not open for further replies.

southbeach

Programmer
Jan 22, 2008
879
US
I am working on a form with no more than 8 fields. All was well until I added three new fields. These new fields are showing with a creamy or tan background.

I am using CSS to set background color on blur but not to this color. The fields seem to no adhere to the CSS I am using

Code:
input
{
color: #35592c;
font-family:arial;
font-size:14px;
border: 1px solid #00C;
height:20px;
padding: 2px 6px;
background-color: #FFF;
} 
input:focus {
	background-color: #E6E6FA;
}

Nothing happens with these fields even when focused. I even tried using style="..." within the <input ...> tag itself and nothing.

Using FF on Win XP

What is up with this?

Thanks!



 
These are the fields that Google toolbar can autofill. I believe you can turn off this option in the Google toolbar options.

If a user has no Google toolbar installed, there will be no manipulation of your inputs.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Here is the code:
Code:
<body>
  <form id="addCheck" action="#" method="post">
    <table class="addCheck" border="0" width="660px" cellpadding="0" cellspacing="0" style="border: 1px solid red;">
      <tr> 
        <td colspan="2" align="center" style="background-image:URL(images/links_bg.gif); color: #fff; font-weight: bold; ">ADD NEW CHECK</td>
      </tr>
      <tr> 
        <td width="25%" align="right">&nbsp;Check Date&nbsp;</td>
        <td><input type="text" onfocus="document.getElementById('payeeList').style.display='none';"  name="date" id="dateID" size="10" maxlength="10" value="<? echo $date; ?>" /></td>
      </tr>
      <tr> 
        <td align="right">&nbsp;Check Amount&nbsp;</td>
        <td><input type="text" onfocus="document.getElementById('payeeList').style.display='none';"  name="amount" value="<? echo $amount; ?>" id="amountID" size="10" maxlength="15" onblur="xajax_CheckAmount(this.value);" /><span id="ckAmount"></span></td>
      </tr>
      <tr> 
        <td align="right">&nbsp;Pay To The Order Of&nbsp;</td>
        <td><input name="payto" onfocus="document.getElementById('payeeList').style.display='none';"  id="paytoID" type="text" onkeyup="payeeList(this.value);" value="<? echo $payto; ?>" size="55" maxlength="80" /></td>
      </tr>
      <tr> 
        <td align="right">&nbsp;Pay To Address&nbsp;</td>
        <td><input type="text" size="55" value="<? echo $ckaddrs; ?>" id="ckaddrID" name="ckaddr" onfocus="document.getElementById('payeeList').style.display='none';"  /></td>
      </tr>
      <tr> 
        <td>&nbsp;</td>
        <td><input type="text" size="55" value="<? echo $ckaddrs1; ?>" id="ckaddr1ID" name="ckaddr1" onfocus="document.getElementById('payeeList').style.display='none';" /></td>
      </tr>
      <tr> 
        <td>&nbsp;</td>
        <td><input type="text" size="55" value="<? echo $ckaddrs2; ?>" id="ckaddr2ID" name="ckaddr2" onfocus="document.getElementById('payeeList').style.display='none';" /></td>
      </tr>
      <tr> 
        <td align="right">&nbsp;Memo&nbsp;</td>
        <td><input name="memo" ond onfocus="document.getElementById('payeeList').style.display='none';"  id="memoID" value="<? echo $memo; ?>" size="55" maxlength="55" /></td>
      </tr>
	  <tr><td colspan="2">&nbsp;</td></tr>
      <tr> 
        <td colspan="2" align="center"><input onmouseover="document.getElementById('payeeList').style.display='none';"  type="button" value="Save Check" class="submit" /><img src="images/spacer.gif" width="55px" height="1px" alt="" /><input type="button" onmouseover="document.getElementById('payeeList').style.display='none';"  value="Close &amp; Abort!" class="submit" /></td>
      </tr>
	  <tr><td colspan="2"><div id="payeeList">&nbsp;</div></td></tr>
    </table>
  </form>

</body>
Very simple and straight forward.

I found that the problem is the prompt prior to the input tags. If I remove the literal "Address" off the prompt, the problem goes away.

I do have google toolbar installed on my FF. I do not like this ... I do not think google should take hostage your applications like that.

Thanks!
 
I don't necessarily agree with you. A toolbar is a browser addon that you install on your computer and agree with the services it provides. It is much the same way how you can choose to install one or another browser on your computer and watch websites through those. And any browser (or addon to the browser) displays the pages in its own little way.

Google toolbar changes colors on some of the fields. Skype converts phone numbers into Skype links. These addons do not change how the web behaves, they change how your browser is viewing the web. And since you agreed to install these programs on your computer, you agreed to the way they display the web.

Still, I do believe that Google toolbar allows you to turn off the functionality of autofilling the fields or at least the visual identification of it.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top