ad box 728 x 90
ad box 468 x 60
KruXoR
Hardware, Software, Code, PHP, ASP, Games, Reviews and Other Funky Stuff
Subscribe

Enter your email address:

Pic of the Month
Recent Posts
Popular Posts
Tags
4.1 dk pvp 4.1 frost mage pvp guide 4.1 mage pvp guide cataclysm cataclysm wow death knight disc priest pvp guide 4.1 dk frost pvp spec 4.1 dk guide 4.1 dk pvp 4.1 dk pvp spec 4.1 dk spec 4.1 frost dk 4.1 frost dk 4.1 pvp frost dk 4.1 rotation frost dk guide 4.1 frost dk pvp 4.1 frost dk pvp 4.2 frost dk pvp guide 4.1 frost dk pvp rotation 4.1 frost dk pvp spec 4.1 frost dk rotation 4.1 frost mage guide 4.1 frost mage pvp 4.1 frost mage pvp guide 4.1 frost mage pvp rotation 4.1 frost pvp 4.1 goldthorn farming kitchen kruxor kruxor cursors.com mage 4.1 pvp mage pvp 4.1 mage pvp guide 4.1 pvp frost mage 4.1 sc2 shadow priest pvp cata uefi bios unholy dk rotation 4.1 web world of warcraft cataclysm world warcraft mounts wow bg wow cata wow cataclysm
Latest Comments
Views
RSS WoW Cataclysm Stuff
Categories

Latest Searches

Top Searches

Nice Form Styling with CSS and one Graphic

Here i show you some nice easy ways to format a HTML form using CSS and a couple of images, just for the button texture.

The CSS:

?Download style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

form {
	background: #dfe3ee;
	padding:10px;
	border:1px solid #c6ccde;
	font-family:corbel,verdana;
	font-size:13px;
	width:500px;
}
 
select {
	background:#FFFFFF;
}
 
div.element {
	margin-bottom:5px;
}
 
div.element label {
	width:130px;
	text-align:right;
	vertical-align:middle;
	display:block;
	color:#555555;
	float:left;
	padding-right:6px;
	padding-top:5px;
}
 
.textbox {
	border:1px solid #c6ccde;
	background:#f5f6f9;
	color:#555555;
	padding:3px;
}
 
input submit {
	color:#FF0000;
}
 
div.infobox {
	width:100px;
	float:right;
	border:1px solid #c6ccde;
	background:#f5f6f9;
	padding:5px;
	font-size:10px;
}
 
input.green { /* the shiny go button */
	background: url(images/green_button_grad_long.png) top left #64a551;
	padding:0px 6px;
	border: 1px solid #3b6e22;
	height:28px;
	color:#FFFFFF;
	font-size:13px;
	width:130px;
	font-weight:bold;
}

The Demo Form

?Download form.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<form>
 
<link href="style.css" rel="stylesheet" type="text/css" />
 
<div class='infobox'><b>Info Box</b><br>Information in the box.</div>
 
<div class='element'>
	<label>
		Label
	</label>
	<input type="text" class='textbox'></input>
</div>
 
 
<div class='element'>
	<label>
		Label
	</label>
	<input type="text" class='textbox'></input>
</div>
 
<div class='element'>
	<label>
		Label
	</label>
	<input type="text" class='textbox'></input>
</div>
 
 
<div class='element'>
	<label>
		Label
	</label>
	<select>
		<option>option</option>
		<option>option</option>
		<option>option</option>
	</select>
</div>
 
<div class='element'>
	<label>
		&nbsp;
	</label>
	<input type='submit' value='Go Button' class='green'>
</div>
 
 
</form>

And the image that i used as the background for the go button is just here, save it in an images folder for it to work correctly.

or here

Also i noticed that the form actually fills the whole screen in IE, so may want to wrap the whole thing with another div depending on the layout of your page.

kruxor on November 15th, 2010
Posted in Featured | No Comments »

Post Tags

«
»
This entry was posted on Monday, November 15th, 2010 at 4:56 pm and is filed under Featured. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

Leave a Reply

Spam Protection by WP-SpamFree

KruXoR is proudly powered by WordPress.
Entries (RSS) and Comments (RSS).
240 queries. 1.186 seconds.
icons by famfamfam.