Custom Text Fields

[SpiritWebb]

Anyone here know how to do this? I'm having problems trying to set up my own custom text field, as to opposed those ugly plain white fields. Here is the code:

style.css

Code: Select all

#loginusername {
       position:absolute;
       left:483px;
       top:178px;
       width:188px;
       height:22px;
       background:url(textfield.png) no-repeat;
       background-color:transparent;
       border: none;
       padding: 0px 0 0 1px;
       z-index:3;
    }
    #loginpassword {
      position:absolute;
      left:483px;
      top:209px;
      width:188px;
      height:22px;
      background:url(textfield.png) no-repeat;
      background-color:transparent;
      border: none;
      padding: 0px 0 0 1px;
      z-index:3;
    }

index.php

Code: Select all

<div id="loginusername">
    <form method="POST" action="authenticate.php">
    <input type="text" name="player" class="loginusername"><br><br>
</div>
<div id="loginpassword">
    <input type="password" name="password" class="loginpassword">
</div>

[jpoisson]

here are a few online tutorials for your situation.

• http://ronsguide.com/css/inputs/
• http://freeyourdesign.com/css/css-custo ... textfield/
• http://www.webcredible.co.uk/user-frien ... orms.shtml
• http://www.noupe.com/css/47-excellent-a ... forms.html

[hallsofvallhalla]

how is it not working? What exactly are you trying to do?

[SpiritWebb]

how is it not working? What exactly are you trying to do?

Remove the old ugly white text field (IE username and password fields) and hide them with a graphic so that my own graphic will be what appears they are writting in...(IE: http://darkorbit.com) how they have their fields, its not the boring look.

[jpoisson]

This is what I am using for mine.

Code: Select all

<form id="register" action="reguser.php" method="post">
	<fieldset>
		<legend align="left">Login Form</legend>

<div class="formfloat"><p><label for="registerUserName">Username:</label></p>
<input type="text" id="registerUserName" name="registerUserName" value="" class="formfield" tabindex="1" size="20" maxlength="20" /></div>

<div class="formfloat"><p><label for="registerPassWord">Password: </label></p>
<input type="text" id="registerPassWord" name="registerPassWord" value="" class="formfield" tabindex="2" size="20" maxlength="20" /></div>

<div class="formfloat"><p><label for="registerPassWordVerification">Verify Password: </label></p>
<input type="text" id="registerPassWordVerification" name="registerPassWordVerification" value="" class="formfield" tabindex="3" size="20" maxlength="20" /></div>

div class="formfloat"><p><label for="registerEmail">Email: </label></p>
<input type="text" id="registerEmail" name="registerEmail" value="" class="formfield" tabindex="4" size="20" maxlength="50" /></div>

<div class="formfloat"><p><label for="registerEmailVerification">Verify Email: </label></p>
<input type="text" id="registerEmailVerification" name="registerEmailVerification" value="" class="formfield" tabindex="5" size="20" maxlength="50" /></div>

<div class="formbreak"></div><br />
<input type="submit" value="Register" name="Submit" tabindex="6" >

</fieldset>
</form>

this is my Cascading Stylesheet

Code: Select all

/* Forms/Legends/Fieldsets
------------------------------------- */

fieldset {
	border: 1px solid #CDCDCD;
	margin-bottom: 30px;
	overflow: hidden;
	height: 100%;
	min-height: 100%;
	padding: 10px 10px 10px 10px;
}

fieldset p {
	font-weight: bold;
	margin: 0;
	color: #999999;
	clear: both;
}

legend {
	font-size: 18px;
	padding: 0 10px 0 10px;
	color: #003366;
}


.formfield {
	background: #CCDBF1 url(../images/Layout/form_bak.gif) repeat-x;
	border: 1px solid #E3E3E3;
	color: #003366;
	padding: 2px;
	margin-bottom: 20px;
	font-size: 18px;
}

.formfieldsm {
	background: #CCDBF1 url(../images/Layout/form_bak.gif) repeat-x;
	border: 1px solid #E3E3E3;
	color: #003366;
	font-size: 10px;
}

.formselect {
	font-size: 14px;
}

fieldset span {
	font-size: 10px;
	font-weight: normal;
}

.formfloat {
	float: left;
	margin-right: 20px;
}

.formbreak {
	clear: both;
	margin-right: 20px;
}

Now I am going to provide you with the form_bak.gif dimensions are 8px wide and 24px tall. I am sure you can make an Image like that in paint.

Also try working on the form as a whole and not just the individual parts. I am not going to explain this because i gave you 3 sites that have alot of tutorial information and i know your not a script kiddie so i know you will go look at them and understand what is going on.