使用 Sass 美化表单控件(一)

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

占位符

占位符，可以用来提示用户当前输入框所需要的信息。只有当 type 类型为 text，search，tel，url 或 email 时，表单控件的占位符属性才会生效，其他类型下会被自动忽略。不足之处在于，使用占位符需要配合恰当的浏览器伪元素前缀，所以，开发者需要手动为主流浏览器添加前缀，包括 IE，Firefox，Safari，Chrome 和 Opear。

占位符混合宏示例

占位符混合宏可以应用到形形色色的上下文环境中，就可以独立使用，也可以配合其他选择器使用。此外，我还声明了一个 Sass map，用来配置所需的样式。

<label for=“username”>Name</label><input type=“text” name=“username” id=“username”  placeholder=“first, last”>

在下述的混合宏中，@at-root 指令被用来将嵌套的样式声明到选择器链的最外层。

注意：本文发布时，由于解析插值存在的问题（比如 @at-root #{&}#{$pseudo}），node-sass
尚不能编译占位符选择器。

$pseudo-phpprefix : '::-webkit-input-placeholder' '::-moz-placeholder' '::-ms-input-placeholder' '::placeholder';$ph-styles:(  font-family: sans-serif,  font-size:medium,  font-style:normal,  font-weight:normal,  color:inherit,  letter-spacing: normal,  line-height: normal,  text-align: inherit,  text-decoration: inherit,  padding:0);@mixin placeholder-theme($styles){    @each $pseudo in $pseudo-phpprefix{         @at-root #{&}#{$pseudo}{             @each $key,$value in $styles{                 #{$key} : #{$value}              }         }    }}@mixin placeholder{    @each $pseudo in $pseudo-phpprefix{        @at-root #{&}#{$pseudo}{            @content        }    }}@include placeholder{color:red;}input{    @include placeholder-theme($ph-styles);}

定义完必须的混合宏之后，我们就可以独立地引用这些混合宏，使其根据参数将所有的占位符渲染为统一的风格。上面的第二个混合宏可以按需配置特定的选择器，同时也无需加载全局的统一样式。

输出的css

::-webkit-input-placeholder {  color: red;}::-moz-placeholder {  color: red;}:-ms-input-placeholder {  color: red;}::placeholder {  color: red;}input::-webkit-input-placeholder {  font-family: sans-serif;  font-size: medium;  font-style: normal;  font-weight: normal;  color: inherit;  letter-spacing: normal;  line-height: normal;  text-align: inherit;  text-decoration: inherit;  padding: 0;}input::-moz-placeholder {  font-family: sans-serif;  font-size: medium;  font-style: normal;  font-weight: normal;  color: inherit;  letter-spacing: normal;  line-height: normal;  text-align: inherit;  text-decoration: inherit;  padding: 0;}input:-ms-input-placeholder {  font-family: sans-serif;  font-size: medium;  font-style: normal;  font-weight: normal;  color: inherit;  letter-spacing: normal;  line-height: normal;  text-align: inherit;  text-decoration: inherit;  padding: 0;}input::placeholder {  font-family: sans-serif;  font-size: medium;  font-style: normal;  font-weight: normal;  color: inherit;  letter-spacing: normal;  line-height: normal;  text-align: inherit;  text-decoration: inherit;  padding: 0;}

提醒：不要使用占位符属性替代标签元素。这两者之前存在明显的差异：标签元素用来描述表单空间的角色定位，提示当前表单控件的信息类型；占位符属性则是用来提示内容的格式。由于各种原因，占位符属性并不一定会展示给用户，所以必须设想没有占位符属性时的用户体验。

占位符跳跃动效

这动效棒极了!稍有不足的是只能在基于 WebKit/Blink 引擎的浏览器下有效果。由于其首次亮相时吸引众人热论的动效表现，也有人称之为
“Floating Label”。

html

<label for=“phone”>Cell Phone</label><input type=“tel” name=“phone” class=“jpinput” id=“phone” placeholder=“[phone]”>

这个特效的魔力来源于来源于伪元素选择器
::-webkit-input-placeholder[style*=hidden]：一旦用户开始填写信息时，该选择器就可以修改占位符元素的状态。我非常期望找到适用于
Mozilla 的等效选择器，但这个愿望最终落空了。在本段的下方，我引用了 David Bushell
所实现的一种方式，该方式充分利用了伪元素选择器，但也存在一些其他的问题。

_js-input.scss`

$jpinput-height:40px;$jpinput-radius:4px;$jpinput-padding:10px 16px;$jpinput-bg:#8DAA91;$jpinput-color:#4F4137;$jpinput-ph-color:$jpinput-color;$jpinput-phide-color:$jpinput-bg;input{    appearance:none;    border-sizing:border-box;    border-radius: $jpinput-radius;    display:inline-block;    outline: 0;    width:100%;}.jpinput{    height:$jpinput-height;    padding:$jpinput-padding;    transition:transform 225ms ease-in-out;    background:$jpinput-bg;    color:$jpinput-color;    @include placeholder{         position:relative;         top:0;         left:0;         transition:all 300ms ease-in-out;         color:rgba($jpinput-ph-color,.5);    }}.jpinput::-webkit-input-placeholder[style*=hidden]{    transform:translateY(-$jpinput-height);    opacity:1;    visibility: visible !important;    color:$jpinput-phide-color;}

当然也有其他的方法可以实现这种动效，希望你能深入理解其中的优点和不足。即使不说你也会理解，有一种解决方案叫做 “JavaScript
无所不能系列”。更多参考资料：

FloatLabels.js
Tympanus TextInputEffects
How the Float Label Pattern Started
Float Label Pattern
Form Label Design
Float Labels Collection by Chris Coyier
David Bushell Demo