Как сделать это?

Question

[Aleks Kirilov]

Ребята, как сделать так, чтобы было так:


У меня получается так:


Нужно чтобы не только при Hover были видны стрелки справа

Comments

[DmitrijP]

можно ваш код?

[DmitrijP]

убрать отступы,либо объединить в одну картинку.

[Aleks Kirilov]

<div class="reserve-block__order">
                    <div class="reserve-block__item">
                      <label for="phone">Phone Number</label>
                      <input type="text" id="phone">
                    </div>
                    <div class="reserve-block__item">
                      <label for="table">Table For </label>
                      <input type="number" id="table" min="1" max="40">
                    </div>
                  </div>

.reserve-block__order {
        margin-top: 30px;
        display: flex;
        position: relative;
        &::after {
          content: "Person";
          font-family: "SerebriRegular";
          color: rgba(#0d0d0d, 0.5);
          display: block;
          position: absolute;
          top: 54%;
          left: 297px;
        }
        .reserve-block__item {
          label {
            font-family: "SerebriRegular";
            font-size: 16px;
            margin-bottom: 2px;
          }
          input {
            border: none;
            width: 206px;
            padding: 0 10px;
            height: 45px;
            &:focus {
              outline: none;
              border: 1px solid #75beff;
            }
          }
        }
      }

[Ankhena]

Aleks Kirilov, "Person" это placeholder, а не псевдоэлемент.
Стрелки справа это две кнопки (теги button). У вас их вообще нету.
Если вы заменяете встроенные в браузер стрелки, то тактика такая: браузерные скрыть, свои поверх нарисовать.