Home › Forums › CSS › Coding a simple form › Re: Coding a simple form
October 11, 2011 at 8:05 am
#88857
BobMember
@Eric: what is the advantage of using inline-block on my labels and inputs?
@Adman, @ChristopherBurton: I thought border-radius should have that because its a CSS3 thing, but I guess it works now without the vendor prefix then.. that’s good to hear!
I’ll try the unordered list idea, seems better. Because right now, I have it like this, but it was kinda hard to code it correctly with all the css and so on.. especially the part around the submit button and the remember me text looks like it could use some improvements! if you see any things I could improve let me know, thanks so far :)
HTML:
Log in!
CSS:
body {
background: #F3E7C2;
}
@font-face {
font-family: 'Lucida Fax';
src: url('fonts/LFAXD.ttf') format ('truetype');
}
#loginwrap {
margin: 0 auto;
width: 580px;
height: 325px;
-moz-border-radius: 10px;
border: 1px solid #FFF;
background: #72AEE5;
padding: 10px;
}
#title {
background: #103E69;
color: #FFF;
height: 40px;
-moz-border-radius: 10px;
font-family: 'Lucida Fax', Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
padding: 2px 2px 2px 10px;
}
form {
color: white;
font-family: 'Lucida Fax', Helvetica, sans-serif;
}
.formcontainer label {
float: left;
width: 100px;
padding-right: 50px;
}
input:focus {
background: #F3E7C2;
}
input[type="submit"] {
background: #103E69;
-moz-border-radius: 10px;
border: none;
color: white;
font-family: 'Lucida Fax', Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
height: 30px;
width: 125px;
}
span.login {
font-size: 14px;
font-family: 'Trebuchet MS';
}
span.forgotpw {
float: right;
padding-right: 90px;
margin-top: -30px;
}
#fieldwrap {
width: 400px;
margin: 0 auto;
margin-top: 50px;
}
#fieldwrap a {
color: white;
}
#fieldwrap a:hover {
color: #333;
}
.formcontainer {
background: #103E69;
padding: 5px;
margin-bottom: 10px;
-moz-border-radius: 4px;
width: 300px;
}