CSS3 Form Design – Vintage Today I prepared great CSS3 styles for forms in vintage style. You can see here styles of most necessary html form elements: text field, selector, checkbox, radio, button, file, textarea and submit button. I hope that I’m not in vain spent the whole evening. It is possible that it will be whole set of styles for your website. Now, let check it.
CSS3表单设计–复古今天，我为复古表单准备了出色CSS3样式。 您可以在此处看到大多数必要的html表单元素的样式：文本字段，选择器，复选框，单选，按钮，文件，文本区域和提交按钮。 我希望我整个晚上都没有白费。 它可能是您网站的整套样式。 现在，让我们检查一下。
最后结果 (Final Result)
现场演示
下载结果
So, lets start
所以，让我们开始吧
步骤1. HTML (Step 1. HTML)
Our form contains all the most of possible form elements:
我们的表单包含所有可能的表单元素：
index.html (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>
<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>
步骤2. CSS (Step 2. CSS)
Now, its time to style our form. Don’t forget to include our CSS file in the head section of the result page.
现在，是时候设计我们的表单了。 不要忘记在结果页面的开头部分包含我们CSS文件。
css / forms.css (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;
}
@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 of popular browsers.
我希望我能够涵盖所有必要的样式。 这些样式在大多数流行的浏览器中应该能很好地工作。
现场演示
下载结果
结论 (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 at your websites. Good luck!
如果您喜欢我们的结果，请别忘了投票，谢谢。 您可以自由修改我们的结果，并在您的网站上使用它。 祝好运！
翻译自: https://www.script-tutorials.com/css3-form-design-vintage/
75
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
