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

最新推荐文章于 2021-08-03 16:07:51 发布

F2E前端爱好者

最新推荐文章于 2021-08-03 16:07:51 发布

阅读量360

点赞数

分类专栏： css3

css3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

表单控件在网页设计中无疑是占有重要地位的。由于表单控件是用户频繁使用到的页面元素，所以有必要使用 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=“(555) 555-5555”>

这个特效的魔力来源于来源于伪元素选择器
::-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;
}