Shulou(Shulou.com)06/01 Report--

This article mainly explains the "floating label case analysis in css". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "floating label case analysis in css".

In the web project, there is a very heavy module is the login / registration module, the main part of this module is a form form, this form form contains two important input groups (username / password), each input group contains label and input, and the layout of label+input is varied, different designers have different design styles, different front-end engineers have different ways to achieve. By comparison, it is found that the current scheme pays attention to both beauty and performance.

So, what are the layout plans for label and input?

The layout scheme of label+input

Label and input (palcholder keyword hint) are divided into upper and lower parts; / / adopted a long time ago and now used occasionally

Label and input (palcholder keyword prompt) are divided into left and right parts (label occupies a certain width, while the fonts in label are aligned with left, right, and both ends); / / case: Weibo login, jdwap landing page, etc.

Label and input (palcholder keyword prompt) are still divided into left and right parts, except that the fonts in label are replaced by icons; / / case: segmentfault community landing page, etc.

Only include input (palcholder keyword prompt); / / case: landing page of hand Amoy, landing page of Nuggets development community, etc.

Only input (palcholder keyword prompt) is displayed, while label is floated and hidden, and label is displayed when the focus event of the input is triggered. / / case: login page before hand Amoy, or refer to JVFloatLabeledTextField, etc.

Each of these schemes has its own advantages and disadvantages. Using label fonts to replace icons with icons is more vivid, but the url access to icons is increased. The number of fonts in label is different, looks unattractive, and the number of words is the same, so this scheme can only be said to be in order. Discarding label directly can make the interface simple and beautiful, but label has the function of label (the functions of label and placeholder will be discussed in more detail below) Using floating label adds animation, but requires the introduction of js, which has significantly higher performance than those without js (there is a solution that does not use js, but is not very compatible).

Labelvsplacholder

Label: describes the role of the form element, and the unique field name used to specify the input

Placeholder: it prompts the user for the format of the content

The two of them seem similar, but their duties are different, and many students have made big mistakes here.

If you need to know more about them, please refer to MDN

Label (no-js) that drives the painting

When making a user interaction page, the user interaction with animation is often more likely to impress the user. Here is a floating label implemented with pseudo-classes.

HTML Code:

Account number

Basic layout css code:

. input-group {

Position:relative

Margin:100px20px

Font-size:16px

}

.input-group > input {

Display:block

Box-sizing:border-box

Width:100%

Padding:16px

Font-size:16px

Line-height:1.0

Border:none

Border-bottom:1pxsolid#cdcdcd

Border-radius:0.4em

Transition:box-shadow0.3s

}

. input-groupinput::placeholder {

Color:#cdcdcd

}

.input-group > input:focus {

Outline:none

Box-shadow:0.2em0.8em1.6em#cdcdcd

}

.input-group > label {

Position:absolute

Bottom:50%

Left:0

Z-index:-1

Visibility:hidden

Color:#050505

Opacity:0

}

First of all, the location of label (posiion:absolute) is set, and its level (z-index:-1) is defined, which is (visibility:hidden) and transparency (opacity:0).

Then, the placeholder style of input is set, which can be styled with the pseudo element:: placeholder

Finally, a transition animation effect is set up to use pseudo-classes: focus defines the shadow style (box-shadow) and outline style (outline) when the input element tag gets focus.

Label floating effect style

.input-group > label {

...

-webkit-transform-origin:00

Transform-origin:00

-webkit-transform:translate3d (0) scale (0)

Transform:translate3d (0) scale (0)

-webkit-transition:

Opacity0.3s

Visibility0.3s

Transform0.3s

Z-index0.3s

Transition:

Opacity0.3s

Visibility0.3s

Transform0.3s

Z-index0.3s

}

.input-group > input:focus~label {

Z-index:1

Visibility:visible

Opacity:1

-webkit-transform:translate3d (0mai 36px meme 0) scale (1)

Transform:translate3d (0maire 36pxmem0) scale (1)

}

In the collection that defines the label style, add its initial transform deformation effect, set the transition transition effect style, and then define the style of its sibling element label when input gets focus.

The effect of this label float is different from that of JVFloatLabeledTextField. The former is to gain focus, and the label starts to float immediately, while the latter is that when the user enters something (that is, when the placeholder disappears), the label starts to float.

To make the effect the same, we can use the feature that pseudo classes can be nested to modify .input-group > input:focus~label to .input-group > input:focus:not (: placeholder-shown) ~ label, where: placeholder-shown can define the explicit and implicit effect of placeholder, but its compatibility is not very good, ie/edge does not support it at all, chrome and safari, and Firefox are OK. Case: demo

Thank you for your reading, the above is the content of "floating label instance Analysis in css". After the study of this article, I believe you have a deeper understanding of the problem of floating label instance analysis in css, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.