preface

This is not a serious article, but maybe you have a little use, in the user input form, might as well add a little effect, let the user input more hi…

The input box changes when a single input box form is focused

The specific implementation

HTML structure code

<input type="text" placeholder="Please enter your name" />
Copy the code

CSS code, of course, you can also use class selector, here I use CSS property selector about selector priority, you can try to test:

Inline Style > ID selector > Class selector = Property selector = pseudo-class selector > label selector = pseudo-element selector

For details, see the documentation CSS Style Priority

Input boxes change when multiple input box forms are focused

The specific example code is shown below

input[type='text'].input[type='password'] {
  height: 40px;
  width: 200px;
  background: transparent;
 border: none;  border-bottom: 1px solid # 999;  text-indent: 20px; The transition: 0.3; outline: none; } input[type='text']:hover, input[type='password']:hover {  border-color: #42b983; }  input[type='text']:focus, input[type='password']:focus {  border-bottom-color: #f1190d; }  input[type='password']::-webkit-input-placeholder, input[type='text']::-webkit-input-placeholder { The transition: 0.5 s; font-size: 14px;  transform-origin: top left; } input[type='password']:focus::-webkit-input-placeholder, input[type='text']:focus::-webkit-input-placeholder { The transform: scale (0.8) translateY (- 10 px);} Copy the code

Analysis of the

This effect is achieved mainly by the way the pseudo-element -webkit-input-placeholder is implemented, combined with the CSS transform, scale reduction, and vertical translation

For specific pseudo-classes and pseudo-elements, see pseudo-classes and pseudo-elements

Source – Form input box focus effect https://coder.itclan.cn/