表单输入可以使web页面增加微妙、有趣的特效。这是用户在某种情况下会与之交互的元素，使它们用起来很好玩可以提高用户体验。我们可能习惯了文本在纸张上的形式，但在数字世界里它们可以更加多姿多彩。这篇文章中，我将分享一些文本输入的新风格和特效。Andrej Radisic在Dribbble上已经有了不错的作品，比如Jawbreaker 输入域，我们的特效就是基于这其中的一种。大多数特效会结合使用CSS动画和伪元素。

注意，这仅仅是由灵感而来，并没有考虑兼容性，我们使用的CSS属性只适用于现代浏览器。

作为标记，我们使用span来封装输入域和标签。为了使特效工作，我们在输入域后放一个只有在使用复选框和单选框时才用到的标签。完全依赖于动态地添加类来获取当前操作的焦点是没有必要的。为了演示这个demo，我们使用了CSS中的:focus pseudo-class和邻接选择器组合的隐藏功能。但你也可以在触发类中使用更多的语义规则，触发类也被用来确保输入域总是打开的（由于标签的位置该输入域不可关闭）。注意，并不是所有特效在CSS中都有触发类。

标签的功能非常强大。我们可以使用伪类:before和:after来定义修饰部分，比如边界和背景，它们可以被移动和操作，甚至可以适当地使用一些CSS来制作简单动画。比如，可以做一个像“Kyo”那样的覆盖层。

第一个特效，“Haruki”，可能看起来好像改变了带有边界的元素高度，但实际上是移动了两个标签伪元素，每一个类似于一个边界（vendor-prefixed属性除外）：