/ Web Dev Zone
Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Make Web Forms Look Like Vintage 1960s Typed Forms

DZone's Guide to

Make Web Forms Look Like Vintage 1960s Typed Forms

by
·
May. 11, 12 · Web Dev Zone ·
Free Resource

Comment (1)

Save
Tweet
{{ articles[0].views | formatCount}} Views

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

Today I prepared some great CSS3 styles for forms in vintage style. You can see here the styles of the most necessary html form elements: text field, selector, checkbox, radio, button, file, textarea and submit button. I hope that I haven't spent the whole evening in vain. This could be the whole set of styles for your website. Now, let's check it out!

Final Result

CSS3 Form Design - Vintage

Live Demo

download result

So, let's start!

Step 1. HTML

Our form contains most of the possible form elements:

index.html

<form action="#" method="post">
    <fieldset>
        <ul>
            <li>
                <label for="name">Name</label>
                <input type="text" name="name">
            </li>
            <li>
                <label for="email">Email</label>
                <input type="text" name="email">
            </li>
        </ul>
    </fieldset>
    <fieldset>
        <ul>
            <li>
                <label for="text">Text Field</label>
                <input type="text" class="required" name="text">
            </li>
            <li>
                <label for="selector">Selector</label>
                <div class="selector">
                    <span style="-moz-user-select: none;">Please Select...</span>
                    <select class="selectors" name="selector">
                        <option value="" selected="">Please Select...</option>
                        <option>Option 1</option>
                        <option>Option 2</option>
                        <option>Option 3</option>
                        <option>Option 4</option>
                        <option>Option 5</option>
                    </select>
                </div>
            </li>
            <li>
                <label for="selector">Disabled</label>
                <div class="selector disabled">
                    <span></span>
                    <select class="selectors" name="selector"></select>
                </div>
            </li>
            <li>
                <label for="checkbox">Checkbox active</label>
                <div class="checker">
                    <span class=""></span>
                    <input type="checkbox" name="checkbox" />
                </div>
                <label for="checkboxc">Checkbox checked</label>
                <div class="checker">
                    <span class="checked"></span>
                    <input type="checkbox" name="checkboxc" />
                </div>
            </li>
            <li>
                <label for="radio">Radio checked</label>
                <div class="radio">
                    <span class="checked"></span>
                    <input type="radio" name="radio" value="radio1">
                </div>

                <label for="radio2">Radio unchecked</label>
                <div class="radio">
                    <span></span>
                    <input type="radio" name="radio2" value="radio2">
                </div>
            </li>
            <li>
                <label for="button">Buttons</label>
                <div class="button"><span style="-moz-user-select: none;">Button 1</span></div>
                <div class="button"><span style="-moz-user-select: none;">Button 2</span></div>
                <div class="button disabled"><span style="-moz-user-select: none;">Button 3</span></div>
            </li>
            <li>
                <label for="file">File</label>
                <div class="uploader">
                    <span style="-moz-user-select: none;" class="filename">Please select file</span>
                    <span style="-moz-user-select: none;" class="action">Upload</span>
                    <input type="file" name="file" />
                </div>
            </li>
            <li>
                <label for="textarea">Textarea</label>
                <textarea name="textarea"></textarea>
            </li>
            <li>
                <input type="submit" name="submit">
            </li>
        </ul>
    </fieldset>
</form>

Step 2. CSS

Now, it's time to style our form. Don’t forget to include our CSS file in the head section of the result page.

css/forms.css

@font-face {
	font-family:'ClarendonRoman';
	src:url('../font/clarebtrom-webfont.ttf') format('truetype');
}
form {
	background-color:#fff;
	overflow:hidden;
	width:465px;
	margin:30px auto;
	padding:10px;
}
form label {
	font:13px "ClarendonRoman", Georgia, Times, serif;
	color:#525250;
	letter-spacing:2px;
	text-transform:uppercase;
	float:left;
	position:relative;
	top:4px;
}
form ul li {
	padding-top:10px;
	clear:both;
	overflow:hidden;
}
form select,form input {
	float:right;
}
form input {
	border-bottom:1px dashed #989895;
	border-right:none;
	border-left:none;
	border-top:none;
	color:#4f4f4f;
	background:none;
	outline:none;
	position:relative;
	font:16px "SeanRegular", Courier New, Courier New, Courier6, monospace;
	letter-spacing:1px;
}
form input:focus {
	border-bottom:1px dashed #000;
	-webkit-transition:border 0.3s ease-in;
	-moz-transition:border 0.3s ease-in;
	-o-transition:border 0.3s ease-in;
	transition:border 0.3s ease-in;
}
form input[type="text"] {
	width:300px;
}
fieldset {
	border:0;
	border-bottom:1px solid #A7A7A4;
	margin-bottom:10px;
	padding:10px;
}
textarea {
	margin-top:4px;
	width:445px;
	height:150px;
	border:none;
	background:none;
	outline:none;
	resize:none;
	overflow:auto;
	color:#4f4f4f;
	font:16px "SeanRegular", Courier New, Courier New, Courier6, monospace;
	letter-spacing:1px;
	float:left;
	display:block;
}
form input[type="submit"] {
	cursor:pointer;
	background:url(../images/submit.png) no-repeat;
	width:445px;
	height:86px;
	border:none;
	text-indent:-9999px;
	position:relative;
	bottom:10px;
}
form input[type="submit"]:hover {
	background-position:0 -86px;
}

div.selector,div.selector span,div.checker span,div.radio span,div.uploader,div.uploader span.action,div.button,div.button span {
	background-image:url(../images/sprite.png);
	background-repeat:no-repeat;
	-webkit-font-smoothing:antialiased;
}
.selector,.radio,.checker,.uploader,.button,.selector *,.radio *,.checker *,.uploader *,.button * {
	margin:0;
	padding:0;
}
.selector select:focus, .radio input:focus, .checker input:focus, .uploader input:focus {
	outline: 0;
}
input.text,input.password,textarea {
	font-size:12px;
	font-family:"ClarendonRoman", Georgia, Times, serif;
	font-weight:400;
	color:#777;
	border-top:solid 1px #aaa;
	border-left:solid 1px #aaa;
	border-bottom:solid 1px #ccc;
	border-right:solid 1px #ccc;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	outline:0;
	padding:3px;
}
input.text:focus,input.password:focus,textarea:focus {
	border-color:#999;
}
div.selector {
	background-position:-483px -130px;
	float:right;
	font:12px "ClarendonRoman",Georgia,Times,serif;
	height:26px;
	left:7px;
	overflow:hidden;
	padding-left:10px;
	position:relative;
	width:300px;
}
div.selector select {
	background:none;
	border:medium none;
	font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:12px;
	height:25px;
	left:0;
	opacity:0;
	position:absolute;
	top:0;
	width:300px;
}
div.selector span {
	cursor:pointer;
	background-position:right 0;
	height:26px;
	line-height:26px;
	display:block;
	float:left;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	width:268px;
	text-shadow:0 1px 0 #fff;
	color:#636363;
	padding:0 25px 0 2px;
}
div.selector:active {
	background-position:-483px -156px;
}
div.selector:active span {
	background-position:right -26px;
}
div.selector:hover {
	background-position:-483px -182px;
}
div.selector:hover span {
	background-position:right -52px;
}
div.selector:hover:active {
	background-position:-483px -208px;
}
div.selector:hover:active span {
	background-position:right -78px;
}
div.selector.disabled {
	background-position:-483px -234px;
}
div.selector.disabled span {
	color:#bbb;
	background-position:right -104px;
}
div.checker {
	float:left;
	height:19px;
	margin-right:10px;
	margin-top:4px;
	position:relative;
	width:19px;
}
div.checker input {
	background:none;
	display:inline-block;
	height:19px;
	opacity:0;
	width:19px;
}
div.checker span {
	background-position:0 -260px;
	display:block;
	float:left;
	height:19px;
	text-align:center;
	width:19px;
}
div.checker:active span {
	background-position:-19px -260px;
}
div.checker:hover span {
	background-position:-38px -260px;
}
div.checker:active:hover span {
	background-position:-57px -260px;
}
div.checker span.checked {
	background-position:-76px -260px;
}
div.checker:active span.checked {
	background-position:-95px -260px;
}
div.checker:hover span.checked {
	background-position:-114px -260px;
}
div.checker:hover:active span.checked {
	background-position:-133px -260px;
}
div.radio {
	width:18px;
	height:18px;
	position:relative;
	float:left;
	margin-top:4px;
	margin-right:10px;
}
div.radio input {
	width:18px;
	height:18px;
	opacity:0;
	text-align:center;
	display:inline-block;
	background:none;
}
div.radio span {
	height:18px;
	width:18px;
	background-position:0 -279px;
	display:block;
	float:left;
	text-align:center;
}
div.radio:active span {
	background-position:-18px -279px;
}
div.radio:hover span {
	background-position:-36px -279px;
}
div.radio:active:hover span {
	background-position:-54px -279px;
}
div.radio span.checked {
	background-position:-72px -279px;
}
div.radio:active span.checked {
	background-position:-90px -279px;
}
div.radio:hover span.checked {
	background-position:-108px -279px;
}
div.radio:hover:active span.checked {
	background-position:-126px -279px;
}
div.uploader {
	background-position:0 -297px;
	height:28px;
	position:relative;
	float:right;
	overflow:hidden;
	width:303px;
	margin-bottom:20px;
	margin-left:23px;
	cursor:pointer;
}
div.uploader span.action {
	background-position:right -409px;
	height:24px;
	line-height:24px;
	float:left;
	display:inline;
	overflow:hidden;
	cursor:pointer;
	width:124px;
	text-align:center;
	text-shadow:#fff 0 1px 0;
	background-color:#f9f9f5;
	font:bold 12px/24px "ClarendonRoman", Georgia, Times, serif;
	color:#636363;
	padding:2px 0;
}
div.uploader span.filename {
	height:24px;
	line-height:24px;
	float:left;
	display:block;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	cursor:default;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	color:#777;
	width:157px;
	font-size:11px;
	margin:2px 0 2px 2px;
	padding:0 10px;
}
div.uploader:hover {
	background-position:0 -353px;
}
div.uploader:hover span.action {
	background-position:right -437px;
}
div.uploader:active span.action {
	background-position:right -465px;
}
div.uploader:focus:active span.action {
	background-position:right -493px;
}
div.uploader input {
	width:303px;
	opacity:0;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	float:right;
	height:25px;
	border:none;
	cursor:default;
}
div.button button,div.button input {
	position:absolute;
}
div.button {
	background-position:0 -523px;
	cursor:pointer;
	position:relative;
	display:-moz-inline-block;
	display:inline-block;
	height:30px;
}
div.button span {
	background-position:right -643px;
	display:-moz-inline-block;
	display:inline-block;
	font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:12px;
	font-weight:700;
	height:22px;
	letter-spacing:1px;
	line-height:1;
	margin-left:13px;
	padding-left:2px;
	padding-right:15px;
	padding-top:8px;
	text-align:center;
	text-transform:uppercase;
}
div.button:focus,div.button:hover {
	background-position:0 -553px;
}
div.button:focus span,div.button:hover span {
	background-position:right -673px;
}
div.button.active,div.button:active {
	background-position:0 -583px;
}
div.button.active span,div.button:active span {
	background-position:right -703px;
	color:#555;
}
div.button.disabled,div.button:disabled {
	background-position:0 -613px;
}
div.button.disabled span,div.button:disabled span {
	background-position:right -733px;
	color:#bbb;
	cursor:default;
}

I hope that I was able to cover all necessary styles. These styles should work well in most popular browsers.

Live Demo

download result

Conclusion

If you like our result – don’t forget to vote up; thanks in advance. You are free to modify our result and use it in your websites. Good luck!

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.

Like This Article? Read More From DZone

LifeCycle of DevOps
wxPython: Set Which Display the Frame Is on
Contraction Mapping: Kepler's Fixed Point Iteration

Free DZone Refcard

Design Systems
DOWNLOAD
Topics:

Comment (1)

Save
Tweet
{{ articles[0].views | formatCount}} Views

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

Web Dev Partner Resources

Jumpstart your next Angular Project with 50+ Material-based UI components
Angular Essentials eBook: Provides Step-by-Step Guidance to Angular
Save hundreds of hours coding and streamline your design to developer handoffs

Web Dev Partner Resources

Jumpstart your next Angular Project with 50+ Material-based UI components
Angular Essentials eBook: Provides Step-by-Step Guidance to Angular
Save hundreds of hours coding and streamline your design to developer handoffs

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.linkDescription }}

{{ parent.urlSource.name }}
by {{ parent.authors[0].realName || parent.author}}
· {{ parent.articleDate | date:'MMM. dd, yyyy' }} {{ parent.linkDate | date:'MMM. dd, yyyy' }}
· {{ parent.portal.name }} Zone