My (mostly technical) blog

Posts Tagged ‘form

I shamelessly ripped of the form designed at this excellent blog to use a somehow modified CSS structure.

The CSS button classes are customizable to allow positive/negative action buttons with different CSS images.

body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}

p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}

form.cleanform{
	margin:0 auto;
	width:400px;
	padding:14px;
	border:solid 2px #b7ddf2;
	background:#EAFFD5;
}

form.cleanform div.header {
	border-bottom:solid 1px #b7ddf2;
	font-size:11px;
	margin-bottom:20px;
}

form.cleanform div.header h1 {
	font-size:14px;
	font-weight:bold;
	margin-bottom:8px;
}

form.cleanform div.header .description {
	color: #666666;
}

form.cleanform p{
	font-size:11px;
	margin-bottom:20px;
}

form.cleanform label{
	display:block;
	font-weight:bold;
	text-align:right;
	width:140px;
	float:left;
}

form.cleanform .small{
	color:#666666;
	display:block;
	font-size:11px;
	font-weight:normal;
	text-align:right;
	width:140px;
}

form.cleanform input{
	float:left;
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #aacfe4;
	width:200px;
	margin:2px 0 20px 10px;
}

/* Button main class */
form.cleanform input.button {
	float:none;
	width:125px;
	height:30px;
	text-align:left;
	line-height:20px;
	color:#FFFFFF;
	font-size:11px;
	font-weight:bold;
	
	background-color:#f5f5f5;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;
	
	font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:90%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
	
	background-position: 6px;
	background-repeat:no-repeat;
	text-indent:30px;
	
	margin: 0;
	padding: 0;
}


/* Positive button */
form.cleanform input.button.positive {
	color::#529214;	
}

form.cleanform input.button:hover.positive {
	background-color:#E6EFC2;
    border:1px solid #C6D880;
    color:#529214;
}

/* Negative button */
form.cleanform input.button.negative {
	color::#d12f19;	
}

form.cleanform input.button:hover.negative {
	background-color:#fbe3e4;
    border:1px solid #fbc2c4;
    color:#d12f19;
}

/* Button images */
form.cleanform input.button.add {
	background-image:url(add.png);
}

form.cleanform input.button.delete {
	background-image:url(delete.png);
}
<form class="cleanform" name="form" method="post" action="form.html">
		
			<div class="header">
				<h1>Sign-up form</h1>
				<p class="description">This is the basic look of my form without table</p>
			</div>
			
			<p>
				<label>Name
					<span class="small">Add your name</span>
				</label>
				<input type="text" name="name" id="name" />
			</p>
			
			<p>
				<label>Email
					<span class="small">Add a valid address</span>
				</label>
				<input type="text" name="email" id="email" />
			</p>
			
			<p>
				<label>Password
					<span class="small">Min. size 6 chars</span>
				</label>
				<input type="password" name="password" id="password" />
			</p>
			
			<div style="float:right">
				<input type="submit" name="submit" class="button positive add" value="Sign-up" />
				<input type="submit" name="submit" class="button negative delete" value="Cancel" />
			</div>
			
			<div class="spacer"></div>
			
		</form>

Download here

Advertisements
Tags: , ,

Ahmed Sabbour's Facebook profile
December 2017
S M T W T F S
« Jul    
 12
3456789
10111213141516
17181920212223
24252627282930
31  

Tweets

Error: Twitter did not respond. Please wait a few minutes and refresh this page.

RSS StackOverflow

Recently bookmarked