当前位置：首页 > 网站模板 > 后台模板

html5和css3表单样式美化插件

分类：后台模板日期：2024-05-14 点击(1) 评论(0)

html5和css3表单样式美化插件

简介

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

1. 复选框
2. 单选按钮
3. 下拉选择框
4. 文件选择框
5. textarea文本框
6. input输入框
7. 提交按钮
HTML结构
我们将使用html5新的表单type类型，为保证IE浏览器对html5的支持，我们需要引入下面的代码。

```html
<!–[if IE 7 ]> <html lang="en" class="ie7″> <![endif]–> 
<!–[if IE 8 ]> <html lang="en" class="ie8″> <![endif]–> 
<!–[if IE 9 ]> <html lang="en" class="ie9″> <![endif]–> 
<!–[if (gt IE 9)|!(IE)]><!–> <html lang="en"> <!–<![endif]–> 
```
同时还要添加 HTML5 Shiv，并使用下面的CSS来重置样式：

```html
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
```html
<input type="checkbox" id="male" /><label for="male">Checkbox</label><br/> 
<input type="radio" name="option" id="female" /><label for="female">Radio 1</label>
<input type="radio" name="option" id="female2" /><label for="female2">Radio 2</label>
```
注意input上的id要和label上的for内容匹配。着可以使我们通过点击label来实现单选按钮和复选按钮的选择。

##### CSS
```html
input[type="radio"], 
input[type="checkbox"] { 
    position: absolute; left: -999em; 
}
```
接下来我们要使用伪元素添加背景图片来替换label元素。处于加载速度的原因，单选和复选按钮使用了两张图片：选中和为选中状态。每张图片都是25x25像素大小。并将它们合并为一张图片。

```html
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计算来定位每张图片的位置。

```html
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完全不支持这些伪元素。

```html
.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
```html
<div class="styled"> 
  <select> 
    <option>Explorer</option> 
    <option>Firefox</option> 
    <option>Webkit</option> 
  </select> 
</div>
```
##### CSS样式
```html
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框中的样式：

```html
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浏览器一些回退代码：

```html
.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
```html
<input type="file" />
```
##### CSS样式
```html
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; 
}
```
下面的样式是移除原来的按钮：

```html
input[type=file]::-webkit-file-upload-button { 
    width: 0; 
    padding: 0; 
    margin: 0; 
    -webkit-appearance: none; 
    border: none; 
}
```
下面的样式是自定义按钮的样式：

```html
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
```html
<input type="text" placeholder="Enter some text here" /><br/> 
<textarea placeholder="Enter some words here" >

web299.com

html5和css3表单样式美化插件

简介

设计团队博客css网站模板

无人机数码商店网站模板

移动版猎豹安全浏览器官网html5动画引导页

微信小程序的手势密码

白色简约布局html5模板

响应式商品展示和商品信息比较网格布局界面