【翻訳】:placeholder-shownセレクターを使用してラベルフローティング効果を実現_html/css_WEB-ITnose

デザイナーは、フローティング ラベル モードを使用して豪華な効果をデザインするのが好きなようですが、この方法が 100% 気に入るかどうかはわかりませんが、このようなデモをすぐに実装せずにはいられません。このバージョンでは、私が最近見たばかりのいくつかの最新の CSS フォーム スタイル トリック、特に :placeholder-shon セレクターが使用されています。

まず最初に、これは決して形や形式ではベストプラクティスではありません。このデモの実装は、一部のブラウザ、特に Chrome/Opera と Safari/WebKit の新しいバージョンで動作します。しかし、Firefox ではクソのように動作します。私はほとんどテストしていないことに注意してください。

この効果を実現するために主に次のテクニックを参照します:

1. フレックスボックス - Hugo Giraudel のサンプル コードを使用して、HTML で入力の後にラベルを配置し、CSS を介してその表示順序を反転します。
2. transform 属性を使用して、ラベルを入力の上に移動します。入力がアクティブな場合、プレースホルダー テキストは不透明度 0 (透明) に設定され、ラベルとプレースホルダー テキストが重なりません。
3. フォームフィールドが入力されている場合やフォーカスがある場合など、プレースホルダーが表示されていない場合、ラベルは上に移動します。 ここでは、「Pseudon't」に関する Jeremy の記事からインスピレーションを受けました。

この最後の点が、私の実装と Chris Coyier と Jonathan Snook の例 (どちらも :valid 疑似クラスを使用する) との違いです。私のデモには一定の制限があると思いますが、最初に述べたように、ブラウザのサポートに関しては常に制限があります。

翻訳: :placeholder-shon は、まだリリースされていない CSS4 仕様に属しています。「使用できますか?」というクエリによると、これまでのところ Chrome (>=47) と Safari (>=9) でのみ利用可能です。 )、Opera (>=35)、Android Browser (>=47)、および Chrome for Android (>=47) これら 5 つのブラウザは、プレースホルダー表示の疑似クラスをサポートします。ここで著者が言及した制限は、ブラウザの :placeholder-shown のサポートに言及する必要があります。

このバージョンは :placeholder-shown 疑似クラスを使用しますが、プレースホルダー テキストが表示されていないときにラベルの位置を移動するだけでなく、:placeholder-shown 疑似クラスはデフォルトの作業モードで非常に優れた役割を果たします。モデルの効果。

関連する HTML コード:

<div>    <input type="text" placeholder="Jane Appleseed">    <label for="fullname">Name</label></div>

...および CSS コード:

/*** 把区域设置为 flex 容器，并逆序排列，使得 label 标签显示在上方*/.field {  display: flex;  flex-flow: column-reverse;}/*** 给 label 和 input 设置一个过渡属性*/label, input {  transition: all 0.2s;}input {  font-size: 1.5em;  border: 0;  border-bottom: 1px solid #ccc;}/*** 设置 input 获得焦点时的边框样式*/input:focus {  outline: 0;  border-bottom: 1px solid #666;}/*** 1\. 标签应保持在一行内，并最多占据字段 2/3 的长度，以确保其比例合适且不会出现换行。* 2\. 修正光标形状，使用户知道这里可以输入.* 3\. 把标签往下平移并放大1.5倍，使其覆盖 placeholder 层.*/label {  /* [1] */  max-width: 66.66%;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;  /* |2] */  cursor: text;  /* [3 */  transform-origin: left bottom;   transform: translate(0, 2.125rem) scale(1.5);}/*** 默认情况下，placeholder 应该是透明的，并且应该继承 transition 属性。*/::-webkit-input-placeholder {  transition: inherit;  opacity: 0;}/*** 在 input 获得焦点时，显示 placeholder 内容。*/input:focus::-webkit-input-placeholder {  opacity: 1;}/*** 1\. 当元素获取焦点时，还原 transform 效果，把 label 移回原来的位置。*     并且，当 placeholder 不显示，比如用户已经输入了内容时，也作同样处理。* 2\. ...并把光标设置为指针形状。*/input:not(:placeholder-shown) + label,input:focus + label {  transform: translate(0, 0) scale(1); /* [1] */  cursor: pointer; /* [2] */}

2016-01-26 更新: 対応する入力ラベルが :placeholder-shown 疑似クラスを持つようにラベル セレクターを更新しました。 、ラベルのトランスフォーム効果のみを使用します。その場合、サポートしていないブラウザは「通常モード」に戻り、入力の上にラベルが表示されます。

JSBin のデモを表示するにはここをクリックしてください。