html原生控件美化,html5和css3表单样式美化插件

这是一款非常实用的html5和css3表单样式美化插件。这款表单美化插件将美化以下的表单元素：

复选框

单选按钮

下拉选择框

文件选择框

textarea文本框

input输入框

提交按钮

HTML结构

我们将使用html5新的表单type类型，为保证IE浏览器对html5的支持，我们需要引入下面的代码。

同时还要添加 HTML5 Shiv，并使用下面的CSS来重置样式：

input, select, textarea {

margin:0;

padding:0;

font-size:0.85em /* this is optional, I like the fonts a little smaller */;

outline:none;

font-family:inherit; box-sizing:border-box /* make sure you use the other vendor prefixes */;

}

下面来看每一个表单元素的美化方式：

单选框和复选框

单选框和复选框的美化效果可以在IE9、FF、Opera和Webkit浏览器上正常工作。

HTML

Checkbox

Radio 1

Radio 2

注意input上的id要和label上的for内容匹配。着可以使我们通过点击label来实现单选按钮和复选按钮的选择。

CSS

input[type="radio"],

input[type="checkbox"] {

position: absolute; left: -999em;

}

接下来我们要使用伪元素添加背景图片来替换label元素。处于加载速度的原因，单选和复选按钮使用了两张图片：选中和为选中状态。每张图片都是25x25像素大小。并将它们合并为一张图片。

input[type="radio"] + label:before,

input[type="checkbox"] + label:before {

content:''; /* this is generated content*/

display: inline-block; /* make this fake elements inline block */

position:relative; /* we need to move the element without effecting the doc flow */

top:0.25em; /* we're moving it slightly down for alignment purposes */

left:-2px; /* we're moving it slightly to the left */

width:25px; height:25px; /* the width and height of the fake elements */

background-image:url(formelements.png); /* the background image sprite */

}

现在，我们有了图片，但是还需要定位它们的位置。我们将使用sprites计算来定位每张图片的位置。

input[type="checkbox"] + label:before { background-position: 0 -25px;}

input[type="checkbox"]:checked + label:before {background-position: 0 0 ; }

input[type="radio"] + label:before { background-position: -25px -25px;}

input[type="radio"]:checked + label:before { background-position: -25px 0;}

第二和第四行代码是说：如果input有a :checked伪类，就改变之前的label伪元素的背景图片的位置。这种方法只有使用之前的html结构才能实现。更多关于这方面的知识，可以查看这篇文章：Smashing Magazine article。

浏览器回退

我们的插件需要支持IE7-8，所以我们需要移除一些它们不支持样式，例如，IE8支持伪元素，但是不支持:checked伪类，这样我们的切换动作就不起作用了，IE7完全不支持这些伪元素。

.ie8 label:before { display:none; content:none; /*this removes the fake content*/ }

.ie8 input[type="checkbox"],

.ie8 input[type="radio"],

.ie7 input[type="checkbox"],

.ie7 input[type="radio"]{ position: static; left:0; /* this puts the inputs back in their place */

}

下拉列表框

下拉列表框可以在IE8+、FF、Webkit浏览器中正常工作。

制作下拉列表框最大的问题是下拉按钮。有许多方法可以渲染它们，到底我们要使用哪种方法来隐藏它们呢？我们使用的方法是，将select包装到以个div中，使select长度大于div，并隐藏div大于select部分(那里是下拉按钮)。然后在里面使用背景图片放置我们自己的下拉按钮。

HTML

Explorer

Firefox

Webkit

CSS样式

div.styled {

overflow:hidden; /* this hides the select's drop button */

padding:0;

margin:0;

background: white url(formelements-select.png) no-repeat bottom right;

/* this is the new drop button, in image form */

width:12em; border-radius:2px;

box-shadow: 0 1px 3px rgba(0,0,0,0.2);

border: solid 1px #ccc;

}

下面是移除select框中的样式：

div.styled select {

width:115% /* this percentage effectively extends the drop down button out of view */;

background-color:transparent /* this hides the select's background making any styling visible from the div */;

background-image:none;

-webkit-appearance: none /* this is required for Webkit browsers */;

border:none;

box-shadow:none;

padding:0.3em 0.5em; /* padding should be added to the select, not the div */

}

这个方法在IE7中不起作用。所以需要给IE7浏览器一些回退代码：

.ie7 div.styled {border:none; }

.ie7 div.styled select {

width:100%;

background-color:white;

border: solid 1px #ccc;

padding:0.3em 0.5em;

}

文件选择框

文件选择框只在webkit内核的浏览器上工作。这里，我们使用一个自定义按钮，通过伪元素将它放在原来按钮的上面。

HTML

CSS样式

input[type="file"] {

position: relative /* this needs to be in place for the pseudo element to position properly */;

-webkit-appearance: none /* this is the key to clearing the default styling */;

width: 40%;

padding:0;

background-color: #f5f5f5;

box-shadow: inset 0 2px 3px rgba(0,0,0,0.2);

border:solid 1px #ccc;

}

下面的样式是移除原来的按钮：

input[type=file]::-webkit-file-upload-button {

width: 0;

padding: 0;

margin: 0;

-webkit-appearance: none;

border: none;

}

下面的样式是自定义按钮的样式：

input[type="file"]:after {

content: ‘Upload File';

margin:0 0 0 0.5em;

display: inline-block; left: 100%; position: relative;

background: white url(formelements-select.png) no-repeat center left;

padding:0.3em 0.5em;

border: solid 1px #ccc;

-webkit-appearance: none;

box-shadow: 0 1px 3px rgba(0,0,0,0.2);

}

文本域和按钮

文本域和按钮的美化效果所有浏览器都支持。当然，IE8不支持阴影效果。

HTML

CSS样式

下面是文本域的和 text input的样式：

input[type="text"], textarea {

width:12em;

border-radius:2px;

border: solid 1px #ccc;

padding:0.4em;

background-color: #f5f5f5;

box-shadow: inset 0 2px 3px rgba(0,0,0,0.2);

}

HTML5的表单可以使用新的type属性，使用最多的是：tel、eamil和number属性。可以像text属性一样使用CSS选择器来选择它们：

input[type="tel"],

input[type="email"],

input[type="number"] {

Your styles here...

}

下面是提交按钮的美化样式：

input[type="submit"], input[type="button"] {

background: white url(formelements-select.png) no-repeat center left;

box-shadow: 0 1px 3px rgba(0,0,0,0.2);

border-radius:4px;

border: solid 1px #ccc;

padding:0.3em 0.5em;

}

注意，对于使用新的CSS3属性，记得添加各个厂商的前缀。

响应式设计

要使这些表单元素都具有响应式的特性，首先需要在头部添加以下的代码：

CSS样式

可以通过media queries媒体查询来使表单元素适应各种不同尺寸的屏幕。

@media screen and (max-width: 600px) {

body { width:80%; font-size:15px; }

}/* end of query */

@media screen and (max-width: 400px) {

input[type="text"], select, div.styled { width:100% }

}/* end of query */