form

使用HTML和CSS提高表单验证用户体验

你可以只使用HTML属性实现表单验证的效果,可以使用CSS选择器带来简洁的用户体验。但是,你需要使用一些CSS技巧让效果更好。

使用 Sass 美化表单控件

表单控件在网页设计中无疑是占有重要地位的。由于表单控件是用户频繁使用到的页面元素,所以有必要使用 Sass 来快速美化项目中的表单控件。

[转载]利用 HTML5 美化表单

对表单感兴趣的人并不多,但 HTML5 引入的一些重大改进却同时方便了创建表单的开发人员和填写表单的用户。全新的表单元素、属性、输入类型、基于浏览器的验证、CSS3 样式技术以及 FormData 对象让创建表单变得更轻松,甚至可能更富有趣味性。

伪元素控制表单样式

伪元素大家熟悉的可能也就是常见的那几种,比如“::before”、“::after”等,熟不知各大引擎浏览器都有自己的私有伪元素,用来做一些特别的处理。比如前段时间CtripUED团队整理的Webkit CSS Library,里面整理了所有webkit引擎浏览器的私有属性和一些伪元素对元素的样式处理。本文由D姐根据TJ VanToll的英文文章原名《List of Pseudo-Elements to Style Form Controls》进行翻译,向大家介绍了一些伪元素控制表单的样式方法。因为当开发web应用程序时,表单样式是个头疼的问题。以前,web开发人员不得不接受一个现实,就是由客户端浏览器控制表单样式。然而,作者通过伪元素给web渲染引擎添加钩子,就可以控制表单的显示。然而,所有这些伪元素都是依赖于特定浏览器引擎的(所以要带有浏览器引擎前缀),这样方便区分特定的浏览器引擎。以下是我自己搜集整理的,在Trident, Gecko, 和 WebKit浏览器引擎下面都可用的伪元素列表。希望这篇文章对大家处理表单时有所帮助。

CSS构建下拉列表

下拉选择框对于前端人员总是烦人的事情,早前要么就是默认的样式,但是有时候需要符合整体设计的需求,默认的总是让人不尽如意,为了解决这个问题,开始有使用j脚本来模仿效果。可是对于不懂js的同学来说,又不知道如何下手。不过不要紧,今天Jekst根据的英文文章原名《Css-only Alternative to the Select Element》进行翻译,给带大家来一篇纯css制作下拉选择框的效果,希望大家能从中找到自己需要的东东。

如何移除button在IE67下的黑边

好久没有处理过IE6下的兼容问题了,今天有朋友碰到过input[type="submit"]和button[type="submit"]在IE6-7下会出现黑边,就算是你在样式中重置了一个border属性也是如此。真是蛋疼的很。后来经过查找相关的资料,终于找到了解决方法,放上来与大家分享一下,这个问题有可能不只一个人会碰到。(^_^)

在介绍如何处理这个bug之间我们一起来回顾一下,在IE6-7下,input[type="submit"]和button[type="submit"]存在的问题还不仅是这个,常见的有:button在IE67下的宽度兼容问题button的行高问题(各浏览器下解析不一样)、button的outline问题,甚至submit在ios下也存在问题。这么多烦人的事,苦逼了前端人员,(具体解决方案可以点击这里查看)。今天就在为大家增加一个问题的解决方案——如何去除IE67下按钮的黑边框

修复iPhone上submit按钮bug

自从完成上次iPhone的几个页面效果后,一直在没有制作iPhone的页面效果了,今天在公司写了一个登录页面效果,让我碰到一个怪异的问题——“表单中的input[type="submit"]和input[type="reset"]按钮在iPhone的safari浏览器下圆角有一个bug”。下面我来简单的描述一下这个bug的样子:

初载入页面后,表单中的input[type="submit"]和input[type="reset"]按钮渲染成下图的样子:

奇怪的是你点击以后就会正常:

对比一下,你也会觉得怪,怪都算了,还不知道如何下手:

CSS3制作表单动态帮助信息

前几天在W3cplus Demo站上放了一个CSS3 Sliding Form Helps效果。

今天我们就一起来看看他是如何实现的。

CSS3和jQuery制作Login栏

这两天制作了一个登入栏效果的案例,简单点说就是集成了以前本站介绍的几个效果。

1、CSS3制作Login栏

2、CSS3和jQuery制作翻转表单

CSS3和jQuery制作翻转表单

CSS3中的Transform应用可以说比较广泛了,但其中的3D Transforms去年就听说了,但一直没有使用过。今天在Tutorialzine看到了一篇这方面的教程《http://tutorialzine.com/2012/02/apple-like-login-form/》。自己动手试了一回,效果蛮好的。现在贴上来与大家一起分享。

这篇教程主要使用了CSS3中的3D transform属性和jQuery制作了一个翻转表单的效果。

页面

返回顶部