Customizing text boxes

HTML & CSS
1

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 :slight_smile:

Thanks,

Alexi

2

Hi Alexi. Welcome to SitePoint. :slight_smile:

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

Thanks!

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

4

OK, I’ve moved this to the CSS forum. What is the X for in the top right corner?

5

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

Hi,

This looks much the same as your drawing:


<!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

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