这是一款使用html5新的type属性制作的表单,并用纯css3来对表单进行美化的html5和css3表单样式美化插件。该表单美化插件美观大方,易于集成,十分实用。 在线演示 [attach]26**[/attach] 这款表单美化插件将美化以下的表单元素:
- 复选框
- 单选按钮
- 下拉选择框
- 文件选择框
- textarea文本框
- input输入框
- 提交按钮
HTML结构 我们将使用html5新的表单type类型,为保证IE浏览器对html5的支持,我们需要引入下面的代码。
- <!–[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来重置样式:
- 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
- <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
- 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
- <div class="styled">
- <select>
- <option>Explorer</option>
- <option>Firefox</option>
- <option>Webkit</option>
- </select>
- </div>
复制代码
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
- <input type="text" placeholder="Enter some text here" /><br/>
- <textarea placeholder="Enter some words here" ></textarea><br/>
- <input type="button" value="« Previous"> <input type="submit" value="Send »">
复制代码
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属性,记得添加各个厂商的前缀。 响应式设计 要使这些表单元素都具有响应式的特性,首先需要在头部添加以下的代码:
- <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
复制代码
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 */
复制代码
via:http://www.htmleaf.com/html5/html5muban/201501051107.html |