Стилизация input'ов

Question

Пытаюсь реализовать данные поля

И возникает ряд вопросов:

Как в placeholder'е звёздочку сделать красной
Почему при добавлении паддингов появляется какие-то "тени" или что-то вроде этого, если я отключал их через *?
Как сделать поле расширяемым подобно 3-ему инпуту(правый нижний угол)?
Как разместить инпуты как скрине? Пытался через display: flex, но пока что безуспешно

Answer 1

Пример 1

* {
  box-sizing: border-box;
}

body {
  background-color: #3C5499;
  margin: 0;
}

.form {
  display: grid;
  gap: 1.25rem;
  padding: 1.25rem;
}

.form__item {
  position: relative;
}

.form__item:nth-of-type(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.form__item:nth-of-type(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.form__item:nth-of-type(3) {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}

.form__control {
  color: #fff;
  height: 50px;
  width: 100%;
  padding: 0.5rem 1rem;
  background-color: #273A71;
  border: none;
  outline: none;
}

.form__label {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  pointer-events: none;
  transition: opacity .3s ease;
}

.form__required {
  color: #f00;
}

.form__control:valid+.form__label {
  opacity: 0;
}

textarea.form__control {
  min-height: 100px;
  padding-top: 1rem;
}

textarea.form__control+.form__label {
  top: 1rem;
  transform: translateY(0%);
}

<form action="#" class="form">
  <div class="form__item">
    <input type="text" class="form__control" id="name" name="name" required>
    <label for="name" class="form__label">
      Name<span class="form__required">*</span>
    </label>
  </div>
  <div class="form__item">
    <input type="email" class="form__control" id="email" name="email" required>
    <label for="email" class="form__label">
      Email<span class="form__required">*</span>
    </label>
  </div>
  <div class="form__item">
    <textarea class="form__control" id="msg" name="msg" required></textarea>
    <label for="msg" class="form__label">
      Message<span class="form__required">*</span>
    </label>
  </div>
</form>

Пример 2

* {
  box-sizing: border-box;
}

body {
  background-color: #3C5499;
  margin: 0;
}

.form {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding: 1.25rem;
}

.form__item {
  position: relative;
  width: calc(50% - 1.25rem / 2);
}

.form__item:nth-of-type(3) {
  width: 100%;
}

.form__control {
  color: #fff;
  height: 50px;
  width: 100%;
  padding: 0.5rem 1rem;
  background-color: #273A71;
  border: none;
  outline: none;
}

.form__label {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  pointer-events: none;
  transition: opacity .3s ease;
}

.form__required {
  color: #f00;
}

.form__control:focus~.form__label,
.form__control:not(:placeholder-shown)~.form__label {
  opacity: 0;
}

textarea.form__control {
  min-height: 100px;
  padding-top: 1rem;
}

textarea.form__control+.form__label {
  top: 1rem;
  transform: translateY(0%);
}

<form action="#" class="form">
  <div class="form__item">
    <input type="text" class="form__control" id="name" name="name" placeholder=" ">
    <label for="name" class="form__label">
      Name<span class="form__required">*</span>
    </label>
  </div>
  <div class="form__item">
    <input type="email" class="form__control" id="email" name="email" placeholder=" ">
    <label for="email" class="form__label">
      Email<span class="form__required">*</span>
    </label>
  </div>
  <div class="form__item">
    <textarea class="form__control" id="msg" name="msg" placeholder=" "></textarea>
    <label for="msg" class="form__label">
      Message<span class="form__required">*</span>
    </label>
  </div>
</form>

Answer 2

Как в placeholder'е звёздочку сделать красной

Такой возможности нет, но как вариант вы можете использовать другой блок и там уже кастомизировать его как угодно (см. пример)

Как сделать поле расширяемым подобно 3-ему инпуту(правый нижний угол)?

Данный блок не совсем инпут, это <textarea>, у неё по умолчанию стоит свойство resize: both.
Так же это свойство можно применить и для других блоков, но увы не для всех:

* {padding: 0; margin: 0; box-sizing: border-box; vertical-align: top;}

.resize {
  display: inline-block;
  width: 200px;
  height: 30px;
  overflow: hidden;
  resize: both;
}

<input class="resize" value="INPUT RESIZE" readonly>

<div class="resize" style="background: #ccc;">DIV RESIZE</div>

<button class="resize">BUTTON RESIZE</button>

Так же нельзя сменить иконку, но её можно воссоздать не хитрым способом (см. пример)

Как разместить инпуты как скрине? Пытался через display: flex, но пока что безуспешно

При должных навыках можно сделать любой технологией, я использовал Grid Layout (см. пример)

Пример

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

body {
  background: linear-gradient(to right, #3c5499, #3c5499);
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  margin: 20px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
}

.form-grid__fill {
  grid-column: 1 / 3;
}

.input-lvl {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  position: relative;
  font-size: 85%;
}

.input-lvl__input,
.input-lvl__label {
  padding: 1em 1.5em;
  box-sizing: border-box;
  color: #fff;
}

.input-lvl__input {
  display: block;
  width: 100%;
  border-radius: 4px;
  border: 0;
  background-color: #273a71;
  font: inherit;
  margin: 0;
  outline: none;
}

textarea.input-lvl__input {
  min-height: 12em;
  height: 12em;
  max-height: 100%;
  overflow: hidden;
  resize: vertical;
  position: relative;
}

.input-lvl--resize {
  position: relative;
}

.input-lvl--resize::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background-color: #273a71;
  background-image: 
    linear-gradient(0, #5568a1, #5568a1), linear-gradient(0, #5568a1, #5568a1),
    linear-gradient(0, #5568a1, #5568a1), linear-gradient(0, #5568a1, #5568a1),
    linear-gradient(0, #5568a1, #5568a1), linear-gradient(0, #5568a1, #5568a1);
  background-repeat: no-repeat;
  background-position:
    calc(100% - 5px) calc(100% - 5px), calc(100% - 10px) calc(100% - 5px),
    calc(100% - 15px) calc(100% - 5px), calc(100% - 10px) calc(100% - 10px),
    calc(100% - 5px) calc(100% - 10px), calc(100% - 5px) calc(100% - 15px);
  background-size: 3px 3px;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

.input-lvl__label {
  display: block;
  width: 100%;
  line-height: 1;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity .1s ease;
  pointer-events: none;
}

.input-lvl__input[required] + .input-lvl__label::after {
  content: '*';
  display: inline-block;
  color: red;
  vertical-align: super;
  margin-top: -.2em;
}

.input-lvl__input:placeholder-shown + .input-lvl__label {
  opacity: 1;
}

<div class="form-grid">
  <div class="input-lvl">
    <input class="input-lvl__input" id="form-name" type="text" placeholder=" " required>
    <label class="input-lvl__label" for="form-name">Your Name</label>
  </div>
  
  <div class="input-lvl">
    <input class="input-lvl__input" id="form-email" type="email" placeholder=" " required>
    <label class="input-lvl__label" for="form-email">Your Email</label>
  </div>
  
  <div class="input-lvl input-lvl--resize form-grid__fill">
    <textarea class="input-lvl__input" id="form-textarea" placeholder=" " required></textarea>
    <label class="input-lvl__label" for="form-textarea">Your Message</label>
  </div>
</div>

БЛОГ НА HUSL

Стилизация input'ов

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

Пример