0

Всем привет!

Хочу сделать такой Input

http://codepen.io/ilwcss/pen/tAgqH

@import "nib"

body
  padding:40px
  font-family:"Helvetica Neue"

.input-wrapper
  position:relative
  line-height:14px
  margin:0 10px
  display:inline-block

label
  color:#bbb
  font-size:11px
  text-transform:uppercase
  position:absolute
  z-index:2
  left:20px
  top:14px
  padding:0 2px
  pointer-events:none
  background:white
  transition:transform 100ms ease
  transform:translateY(-20px)

input 
  font-size:13px
  color:#555
  outline:none
  border:1px solid #bbb
  padding:10px 20px
  border-radius:20px
  position:relative

  &:invalid + label
    transform:translateY(0)
    
  &:focus
    border-color:#2b96f1

    & + label
      color:#2b96f1
      transform:translateY(-20px)
<div class="input-wrapper">
  <input type="text" id="user" required>
  <label for="user">user name</label>
</div>
  
<div class="input-wrapper">
  <input type="password" required>
  <label for="user">password</label>
</div>

но в нем используются библиотеки и препроцессор.

Как выдернуть нужные данные из библиотеки и сделать обычный файл CSS?

2 ответа 2

5

Не понимаю, о какой библиотеке вы говорите (пример ниже я просто скопировал и вставил, вроде бы это обычный css и никаких библиотек я здесь не вижу). Если вы имеете ввиду nib, то это не совсем библиотека, скорее расширение стилуса для придания кроссбраузерности.

body {
  padding: 40px;
  font-family: "Helvetica Neue";
}
.input-wrapper {
  position: relative;
  line-height: 14px;
  margin: 0 10px;
  display: inline-block;
}
label {
  color: #bbb;
  font-size: 11px;
  text-transform: uppercase;
  position: absolute;
  z-index: 2;
  left: 20px;
  top: 14px;
  padding: 0 2px;
  pointer-events: none;
  background: #fff;
  -webkit-transition: -webkit-transform 100ms ease;
  -moz-transition: -moz-transform 100ms ease;
  -o-transition: -o-transform 100ms ease;
  -ms-transition: -ms-transform 100ms ease;
  transition: transform 100ms ease;
  -webkit-transform: translateY(-20px);
  -moz-transform: translateY(-20px);
  -o-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  transform: translateY(-20px);
}
input {
  font-size: 13px;
  color: #555;
  outline: none;
  border: 1px solid #bbb;
  padding: 10px 20px;
  border-radius: 20px;
  position: relative;
}
input:invalid + label {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -o-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
input:focus {
  border-color: #2b96f1;
}
input:focus + label {
  color: #2b96f1;
  -webkit-transform: translateY(-20px);
  -moz-transform: translateY(-20px);
  -o-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  transform: translateY(-20px);
}
<div class="input-wrapper">
  <input type="text" id="user" required>
  <label for="user">user name</label>
</div>
  
<div class="input-wrapper">
  <input type="password" required>
  <label for="user">password</label>
</div>

Если вы вдруг не знаете, как получить результат препроцессора на codepen, то вот скриншот:

введите сюда описание изображения

1

Утро вечера мудренее... Вот вам рабочий вариант.

.container {
  position: relative;
}

.container input {
  padding: .5em 1em;
  border: 1px solid #59d;
  border-radius: 2em;
  background-color: transparent;
}

.container input+span {
  position: absolute;
  left: .5em;
  top: calc(.5em - 2px);
  color: #bbb;
  z-index: -10;
  padding: 0 .5em;
  transition: .2s;
}

.container input:focus+span,
.container input:valid+span {
  z-index: 10;
  top: 0;
  transform: translatey(-50%);
  background-color: white;
}
<div class="container">
  <input type="text" value="" required><span>Name</span>
</div>

1
  • Спасибо! Все сделал с вашей помощью! В принципе вопрос закрыт. 7 мар 2017 в 8:39

Ваш ответ

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

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