Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Rollover Form Text disappear

    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!

  • #2
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    Hello drumlegend19,

    Here's a sample you can take a look at: http://www.theeagleextra.com/testfil...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

    .
    Last edited by Kevin_M_Schafer; 01-31-2012 at 08:29 PM. Reason: text clarity
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • Users who have thanked Kevin_M_Schafer for this post:

    drumlegend19 (01-31-2012)

  • #3
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you, that is perfect, I appreciate you taking the time to do that for me.

  • #4
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    You are very welcome.

    --Kevin

    .
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •