CSS: como fazer placeholder que vira label Example

By

CSS Example: This is the "como fazer placeholder que vira label" Example. compiled from many sources on the internet by SimpleTutorials.org

como fazer placeholder que vira label


como fazer placeholder que vira label

.label-float {
  position: relative;
  padding-top: 13px;
}

.label-float input {
  border: 1px solid lightgrey;
  border-radius: 5px;
  outline: none;
  min-width: 250px;
  padding: 15px 20px;
  font-size: 16px;
  transition: all .1s linear;
  -webkit-transition: all .1s linear;
  -moz-transition: all .1s linear;
  -webkit-appearance: none;
}

.label-float input:focus {
  border: 2px solid #3951b2;
}

.label-float input::placeholder {
  color: transparent;
}

.label-float label {
  pointer-events: none;
  position: absolute;
  top: calc(50% - 8px);
  left: 15px;
  transition: all .1s linear;
  -webkit-transition: all .1s linear;
  -moz-transition: all .1s linear;
  background-color: white;
  padding: 5px;
  box-sizing: border-box;
}

.label-float input:required:invalid+label {
  color: red;
}

.label-float input:focus:required:invalid {
  border: 2px solid red;
}

.label-float input:required:invalid+label:before {
  content: '*';
}

.label-float input:focus+label,
.label-float input:not(:placeholder-shown)+label {
  font-size: 13px;
  top: 0;
  color: #3951b2;
}



* Summary: This "como fazer placeholder que vira label" CSS Example is compiled from the internet. If you have any questions, please leave a comment. Thank you!

Others