0

Увидел как реализовано input-ы на сайте при регистрации, оформлены в стиле material design как в андройде при наведении. Не подскажите как это можно сделать? есть готовые скрипты или все ручками? p.s сайт не рекламировал и не советую туда заходить

1 ответ 1

1

Взято с сайта по ссылке, через инспектор кода.

Из фреймворков рекомендую materializecss

.form-material.floating {
  margin-top: 20px;
  margin-bottom: 20px;
}

.form-material {
  position: relative;
}

.form-material .form-control,
.form-material .form-control.focus,
.form-material .form-control:focus {
  float: none;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#62a8ea), to(#62a8ea)), -webkit-gradient(linear, left top, left bottom, from(#e4eaec), to(#e4eaec));
  background-image: -webkit-linear-gradient(#62a8ea, #62a8ea), -webkit-linear-gradient(#e4eaec, #e4eaec);
  background-image: -o-linear-gradient(#62a8ea, #62a8ea), -o-linear-gradient(#e4eaec, #e4eaec);
  background-image: linear-gradient(#62a8ea, #62a8ea), linear-gradient(#e4eaec, #e4eaec);
}

.form-material .form-control {
  padding: 0;
  -webkit-background-size: 0 2px, 100% 1px;
  background-size: 0 2px, 100% 1px;
  background-repeat: no-repeat;
  background-position: center bottom, center -webkit-calc(100% - 1px);
  background-position: center bottom, center calc(100% - 1px);
  background-color: transparent;
  background-color: rgba(0, 0, 0, 0);
  -webkit-transition: background 0s ease-out;
  -o-transition: background 0s ease-out;
  transition: background 0s ease-out;
}

.form-control:not(select) {
  -webkit-appearance: none;
}

.form-control {
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: -webkit-box-shadow .25s linear, border .25s linear, color .25s linear, background-color .25s linear;
  -o-transition: box-shadow .25s linear, border .25s linear, color .25s linear, background-color .25s linear;
  transition: box-shadow .25s linear, border .25s linear, color .25s linear, background-color .25s linear;
}

.form-control {
  display: block;
  width: 100%;
  height: 36px;
  padding: 6px 15px;
  font-size: 14px;
  line-height: 1.57142857;
  color: #76838f;
  background-color: #fff;
  background-image: none;
  border: 1px solid #e4eaec;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
}

.form-material .form-control.focus,
.form-material .form-control:focus {
  outline: 0;
  -webkit-background-size: 100% 2px, 100% 1px;
  background-size: 100% 2px, 100% 1px;
  -webkit-transition-duration: .3s;
  -o-transition-duration: .3s;
  transition-duration: .3s;
}

.form-material .form-control,
.form-material .form-control.focus,
.form-material .form-control:focus {
  float: none;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#62a8ea), to(#62a8ea)), -webkit-gradient(linear, left top, left bottom, from(#e4eaec), to(#e4eaec));
  background-image: -webkit-linear-gradient(#62a8ea, #62a8ea), -webkit-linear-gradient(#e4eaec, #e4eaec);
  background-image: -o-linear-gradient(#62a8ea, #62a8ea), -o-linear-gradient(#e4eaec, #e4eaec);
  background-image: linear-gradient(#62a8ea, #62a8ea), linear-gradient(#e4eaec, #e4eaec);
}

form-material .form-control.focus~.floating-label,
.form-material .form-control:focus~.floating-label {
  color: #62a8ea;
}

.form-material .form-control.focus~.floating-label,
.form-material .form-control:focus~.floating-label,
.form-material .form-control:not(.empty)~.floating-label {
  font-weight: 500;
}

.form-material .form-control.focus~.floating-label,
.form-material .form-control:focus~.floating-label,
.form-material .form-control:not(.empty)~.floating-label {
  top: -11.2px;
  font-size: 11.2px;
}

.form-material .form-control~.floating-label {
  font-size: 14px;
  top: 8px;
}

.form-material label {
  color: #a3afb7;
  font-weight: 300;
}

.form-material .floating-label {
  font-size: 14px;
  color: #76838f;
  position: absolute;
  pointer-events: none;
  left: 0;
  -webkit-transition: .3s ease all;
  -o-transition: .3s ease all;
  transition: .3s ease all;
}
<div class="form-group form-material floating">
  <input id="u_login" type="text" name="u_login" class="form-control empty" maxlength="20" value="">
  <label class="floating-label">Ваш логин</label>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.