Sass美化フォームコントロールの使用(一)

フォームコントロールは、Webデザインにおいて重要な地位を占めているに違いありません.フォームコントロールはユーザーが頻繁に使用するページ要素であるため、Sassを使用してプロジェクト内のフォームコントロールを迅速に美化する必要があります.
プレースホルダ
現在の入力ボックスに必要な情報をプロンプトするプレースホルダ.typeタイプがtext,search,tel,urlまたはemailの場合にのみ、フォームコントロールのプレースホルダ属性が有効になり、他のタイプでは自動的に無視されます.足りない点は、プレースホルダを使用するには適切なブラウザの偽要素の接頭辞を合わせる必要があるため、開発者はIE、Firefox、Safari、Chrome、Operarを含む主流ブラウザに手動で接頭辞を追加する必要がある.
プレースホルダブレンドマクロの例
プレースホルダブレンドマクロは、さまざまなコンテキスト環境に適用できます.独立して使用したり、他のセレクタと組み合わせて使用したりできます.さらに、必要なスタイルを設定するための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);
}

必要なブレンドマクロを定義したら、これらのブレンドマクロを独立して参照して、パラメータに基づいてすべてのプレースホルダを統一したスタイルにレンダリングできます.上記の2番目のハイブリッドマクロは、グローバルな統合スタイルをロードすることなく、特定のセレクタをオンデマンドで構成できます.
出力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; }

注意:ラベル要素の代わりにプレースホルダ属性を使用しないでください.この2つの前に明らかな違いがあります.ラベル要素はフォーム空間の役割の位置を記述し、現在のフォームコントロールの情報タイプを提示します.プレースホルダプロパティは、コンテンツをプロンプトするフォーマットです.様々な理由から、プレースホルダ属性が必ずしもユーザに表示されるとは限らないため、プレースホルダ属性がない場合のユーザ体験を想定する必要がある.
プレースホルダジャンプエフェクト
この動きはすばらしい.少し足りないのは、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;
}

もちろん、このような効果を実現する他の方法もあります.その長所と不足を深く理解してほしいです.言わなくてもわかりますが、「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