SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member shygirl15's Avatar
    Join Date
    May 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Customizing text boxes

    Hello,

    I am trying to design a custom login section. I have to ask though. Sometimes I see the textbox is custom. It isn't the normal white textbox you see. I was wondering a method this can be done?

    Links or strings that I can google that might lead me to the answer is fine. Im just not sure what I can google right now since I'm sure there is a name of them that I don't know

    Thanks,

    Alexi

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi Alexi. Welcome to SitePoint.

    There are various ways to style a login box with CSS. Perhaps show us a picture of what you want it to look like and we can make suggestions.

  3. #3
    SitePoint Member shygirl15's Avatar
    Join Date
    May 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hi Alexi. Welcome to SitePoint.

    There are various ways to style a login box with CSS. Perhaps show us a picture of what you want it to look like and we can make suggestions.
    Thanks!



    I want to have something like this... The text color would be white i guess

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    OK, I've moved this to the CSS forum. What is the X for in the top right corner?

  5. #5
    SitePoint Member shygirl15's Avatar
    Join Date
    May 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    OK, I've moved this to the CSS forum. What is the X for in the top right corner?
    hi, most people just move it and dont say anything.. thanks for letting me know lol

    the X is to x out.. say someone clicks login, but then decides against it or forgets their password or something... the X is to hide the login div.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    This looks much the same as your drawing:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .login {
        margin:0;
        padding:23px 10px 10px;
        width:310px;
        background:#2b9ce7;
        color:#f0f;
        position:relative;
        line-height:1.3;
        border:1px solid #999;
        webkit-box-shadow: 5px 5px 10px #000000;
        -moz-box-shadow: 5px 5px 10px #000000;
        box-shadow: 5px 5px 10px #000000;
    }
    .login fieldset {
        margin:0;
        padding:45px 0 5px;
        border:none;
        width:310px;
        background:#000;
        color:#f0f;
    }
    .login legend {
        text-transform:uppercase;
        font-weight:bold;
        font-size:110%;
        text-shadow: 2px 2px 2px #000000;
    }
    .login span {
        position:absolute;
        top:1px;
        left:45px;
    }
    .login a {
        position:absolute;
        right:10px;
        top:2px;
        color:#ccc;
        text-decoration:none;
        font-weight:normal;
        background:#f0f;
        padding:0 4px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        font-size:85%;
    }
    .login label {
        width:100px;
        display:inline-block;
        vertical-align:middle;
        font-size:92%;
        margin:0 0 10px 50px;
        font-style:italic;
        font-weight:bold;
    }
    #username, #password {
        background:#000;
        border:1px solid #2b9ce7;
        color:#fff;
        margin:0 0 10px;
        padding:3px 5px;
        width:100px;
        vertical-align:middle;
    }
    #go {
        display:block;
        margin:15px auto 25px;
        width:110px;
        height:22px;
        line-height:22px;
        background:#2b9ce7;
        color:#f0f;
        text-transform:uppercase;
        border:none;
        padding:0;
        font-weight:bold;
    }
    #go:hover {
        background:#f0f;
        color:#2b9c37;
    }
    </style>
    </head>
    <body>
    <form class="login" name="form1" method="post" action="">
        <fieldset>
        <legend><span>Login</span> <a href="#">X</a></legend>
        <label for="username">User Name:</label>
        <input type="text" name="username" id="username">
        <br>
        <label for="password">Password:</label>
        <input type="password" name="password" id="password">
        <br>
        <input type="submit" name="go" id="go" value="Go">
        </fieldset>
    </form>
    </body>
    </html>
    It's just pretty straight forward css but shout if there's anything you don't understand.

  7. #7
    SitePoint Member shygirl15's Avatar
    Join Date
    May 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    This looks much the same as your drawing:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .login {
        margin:0;
        padding:23px 10px 10px;
        width:310px;
        background:#2b9ce7;
        color:#f0f;
        position:relative;
        line-height:1.3;
        border:1px solid #999;
        webkit-box-shadow: 5px 5px 10px #000000;
        -moz-box-shadow: 5px 5px 10px #000000;
        box-shadow: 5px 5px 10px #000000;
    }
    .login fieldset {
        margin:0;
        padding:45px 0 5px;
        border:none;
        width:310px;
        background:#000;
        color:#f0f;
    }
    .login legend {
        text-transform:uppercase;
        font-weight:bold;
        font-size:110%;
        text-shadow: 2px 2px 2px #000000;
    }
    .login span {
        position:absolute;
        top:1px;
        left:45px;
    }
    .login a {
        position:absolute;
        right:10px;
        top:2px;
        color:#ccc;
        text-decoration:none;
        font-weight:normal;
        background:#f0f;
        padding:0 4px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        font-size:85%;
    }
    .login label {
        width:100px;
        display:inline-block;
        vertical-align:middle;
        font-size:92%;
        margin:0 0 10px 50px;
        font-style:italic;
        font-weight:bold;
    }
    #username, #password {
        background:#000;
        border:1px solid #2b9ce7;
        color:#fff;
        margin:0 0 10px;
        padding:3px 5px;
        width:100px;
        vertical-align:middle;
    }
    #go {
        display:block;
        margin:15px auto 25px;
        width:110px;
        height:22px;
        line-height:22px;
        background:#2b9ce7;
        color:#f0f;
        text-transform:uppercase;
        border:none;
        padding:0;
        font-weight:bold;
    }
    #go:hover {
        background:#f0f;
        color:#2b9c37;
    }
    </style>
    </head>
    <body>
    <form class="login" name="form1" method="post" action="">
        <fieldset>
        <legend><span>Login</span> <a href="#">X</a></legend>
        <label for="username">User Name:</label>
        <input type="text" name="username" id="username">
        <br>
        <label for="password">Password:</label>
        <input type="password" name="password" id="password">
        <br>
        <input type="submit" name="go" id="go" value="Go">
        </fieldset>
    </form>
    </body>
    </html>
    It's just pretty straight forward css but shout if there's anything you don't understand.




    wow, this is amazing. I kinda feel bad that you just GAVE me the code. I kind of expected to just get clued in. This really is nice though, and I'll be sure to look over how exactly you did it so i don't have to ask again! I dont think i will have questions but if i do i'll post them on this thread.

    thanks again.. not sure if there is a thanks button but ill press it if i see it lol

    thanks again


Bookmarks

Posting Permissions

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