...

View Full Version : Rollover Form Text disappear



drumlegend19
01-31-2012, 08:22 PM
I am still quite new to HTML and CSS and I just need guidance on how to do the following thing.

I am creating a website in HTML5 and CSS3, I have created a login form with the value="Username" and I want the text to disappear once you click in the box.

CSS Code -

.inset { /* ---- THIS CHANGES THE INPUT BOX'S STYLE ---- */
background:#fff;
padding: 6px 3px 6px 6px;
width:200px;
border: solid 1px #bcbbbb;
outline: none;
border-radius: 2em;
box-shadow: inset 0 1px 2px rgba (0,0,0,.2);
color:000;
background-color:#fff;
}

.Register {
border: solid 1 px #d2d2d2;
padding: 4px 2px;
width:360px;
height:60px;
}

.Register input {
font: normal 16px/100% Arial, Helvetica, sans-serif;
}

.Register input:focus { /* ---- THIS CHANGES THE EFFECT WHEN HOVERING INPUT BOX'S ---- */
box-shadow: #000000 0 0px 8px inset;
}

.Register label {
font: normal 16px/100% Arial, Helvetica, sans-serif;
}

legend { /* ---- THIS IS THE TOP HALF OF REGISTRATION FORM ---- */

}

.Submit {
color:#FFFFFF;
border:solid 1px #494949;
font-size:11px;
height:30px;
width:100px;
margin:0 auto;
text-shadow: 0 1px 1px rgba(0,0,0.6);
border-radius:2em;
background: #5f5f5f;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background: -moz-linear-gradient(top, #9e9e9e, #454545);
}

.Submit:hover{
box-shdaow: #111111 0 0px 6px;
}

.Submit:focus{
box-shadow: #33FF66 0 0px 8px;
}


HTML Code -

<form method="post" action="#">

<legend></legend>

<div class="Register">

<input type="text" value="Email Address" class="inset" name="UserName" id="UserName" accesskey="3" title="Enter User Name" />

<input type="text" value="Password" class="inset" name="Password" id="Password" accesskey="4" title="Enter Password" />

<input type="submit" value="Register" id="btn" class="Submit"/>

Any help would be greatly appreciated!

Kevin_M_Schafer
01-31-2012, 08:27 PM
Hello drumlegend19,

Here's a sample you can take a look at: http://www.theeagleextra.com/testfiles/searchbox/searchbox.html

View the source code and you'll find some ideas.

Edit: When you post code, use the "#" button and place your code inside the brackets that appear.

--Kevin

.

drumlegend19
01-31-2012, 08:29 PM
Thank you, that is perfect, I appreciate you taking the time to do that for me.

Kevin_M_Schafer
01-31-2012, 08:31 PM
You are very welcome.

--Kevin

.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum