Question on formatting text boxes in forms

Bluesguitar · March 2nd, 2005, 05:26 PM

Hey, I have a quick question for ya guys! I'm settting up a form on my band's website so people can fill it out and send it to our email address. I have it all working fine but I'm having troubles with formatting the text in the text boxes and on the submit button. The background on our website right now is black and so I'm making the background in the text boxes a dark gray. I can't figure out how to change the text inside the boxes (using CSS) to a color other than black. It's near impossible to read what has been typed the way it is. Thanks in advance for your help.

OuTpaTienT · March 2nd, 2005, 06:04 PM

You can just use css to define the type of font you want, including it's color, in then assign your input boxes using that class...

define in "style" portion of your html:
.bginput {font-size: 9px; font-family: verdana, arial, helvetica, sans-serif;color: #000000; background-color: #cfcfcf}

use in body to assign that class to your input boxes:
class="bginput"

Example from a web page of mine:

Here's the <style> portion of the page that is within the <head> portion of the document:

----------------------------------------------------------------------
<style type="text/css">
body { background-image: url("bgfade.jpg")}

select {font-family: verdana,arial,helvetica,sans-serif;font-size: 9px;color: #000000;background-color: #cfcfcf}
textarea, .bginput {font-size: 9px; font-family: verdana, arial, helvetica, sans-serif;color: #000000; background-color: #cfcfcf}
a:link, a:visited, a:active {color: #000000; text-decoration: none}
a:hover {color: #0099ff;}
#ltlink a:link, #ltlink a:visited, #ltlink a:active { color: #0000ce;text-decoration: none;}
#ltlink a:hover { color: #ff4400;text-decoration: none;}
.thtcolor {color: #000000;}

Smalltext, .s { font-family: arial, verdana, tahoma; font-size: 8pt; font-weight: normal; color: #000000; text-decoration: none; }
Photobg, .fp { font-family: arial, verdana, tahoma; font-size: 7pt; font-weight: normal; color: #000000; text-decoration: none; background-image: url("findphotosmoz.gif")}
Photobg2, .wl { font-family: arial, verdana, tahoma; font-size: 7pt; font-weight: normal; color: #000000; text-decoration: none; background-image: url("worthlinksmoz.gif");background-repeat: no-repeat;}
</style>

----------------------------------------------------------------------

And here's the <body> portion of the document where inside a <table> I use the <form> command to make my input box. I assign the above defined class of .bginput to the box using class:

----------------------------------------------------------------------

<body>.....
<table>....

<form target="_content" Name="frmName" action="http://www.worth1000.com/usersearch.asp" method="post">
<input type="text" name="txtName" class="bginput" size="12" value="Find User">
<input type="image" onclick="find_names(txtName);" src="gobutton.gif" alt="Search by Username, E-mail or User ID">
<input type="hidden" name="formName" value="frmName">
<input type="hidden" name="edit" value="2">

</form>
----------------------------------------------------------------------

Bluesguitar · March 2nd, 2005, 06:19 PM

Thanks! Worked perfectly. I trying to use 'text-color:' instead of 'color:'

I should've figured it out myself... but didn't! Thanks