Как сделать такой input?

Question

Как получить такой input на CSS?

Answer 1

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

Использовал fontawesome 5 и jQuery

$(".container input").on("focus click",function(){
  $(".container label").addClass("any");
});

$(".container input").on("blur",function(){
  if ($(this).val().length === 0)
    $(".container label").removeClass("any");
});

html,body {
 background: #f1f3f2;
}

.container {
  width: 300px;
  position: relative;
 
}

#inp {
  width: 100%;
  height: 40px;
  border-radius: 10px; 
  font-size: 1.3rem;
  padding-left: .5rem;
  padding-right: .5rem;
  padding-top: .5rem;
  background: #e6e7e9;
  color: #717171;
}

.container label {
  position: absolute;
  top: 19px;
  left: 8px;
  color: #717171;
  font-size: 1.3rem;
  transition: all .2s;
}

.container label span{
  margin-left: .5rem;
}

.container label.any {
  font-size: 1rem;
  top: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>
<div class="container">
  <input id="inp"/>
  <label for="inp"><i class="fas fa-user"></i><span>Логин</span></label>
</div>

Answer 2

Вот такой вариант на чистом.

body {
  background: #f3f5f4;
}

.custom {
  position: relative;
}

.custom:not(:last-child) {
  margin-bottom: 10px;
}

.custom::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  pointer-events: none;
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 1;
}

.custom input {
  display: block;
  width: 100%;
  padding: 16px 10px;
  padding-left: 26px;
  background: rgba(0,0,0,.1);
  border: 0;
  border-radius: 15px / 10px;
  box-shadow: 
    0 3px 2px -2px rgba(0,0,0,.4) inset,
    0 -3px 2px -2px rgba(255,255,255,.75) inset;
  box-sizing: border-box;
}

.custom.-login::before {
  background-image: url('https://image.flaticon.com/icons/svg/2521/2521782.svg');
}

.custom.-password::before {
  background-image: url('https://image.flaticon.com/icons/svg/2237/2237730.svg');
}

<div class="custom -login">
  <input type="text" value="">
</div>

<div class="custom -password">
  <input type="password" value="">
</div>

Answer 3

Внесу свои пять копеек, если вас интересует вид, приближенный к эскизу, в виде трапеции:

body {
  background-color: #f3f5f4;
}

div {
  position: relative;
  display: inline-block;
  perspective: 400px;
}

div input {
  border: none;
  background: none;
  height: 60px;
  width: 600px;
  position: relative;
  z-index: 1;
  font-size: 28px;
  padding: 0 30px;
  box-sizing: border-box;
}

div input:focus {
  outline: none;
  background-size: 12px;
}

div:before {
  content: '';
  display: block;
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: #e6e7e9;
  border-radius: 15px;
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 1);
  transform: rotateX(-5deg);
  transition: all 0.3s ease-in-out;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2),
              inset 0 -2px 2px rgba(255, 255, 255, 0.2);
}

div:focus-within:before {
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2),
              inset 0 -2px 2px rgba(255, 255, 255, 0.2),
              0 0 0 4px rgba(200, 200, 200, 0.5);
}

div:after {
  content: '';
  position: absolute;
  z-index: 3;
  width: 24px;
  height: 24px;
  top: 50%;
  left: 15px;
  background-size: 100%;
  transition: all 0.3s ease-in-out;
  background-image: url(https://i.stack.imgur.com/6fo9g.png);
  background-repeat: no-repeat;
  transform: translateY(-50%)
}

div:focus-within:after {
  width: 16px;
  height: 16px;
  left: 9px;
  top: 35%;
}

<div>
  <input type="text">
</div>

БЛОГ НА HUSL

Как сделать такой input?

Ответы (3 шт):