Как сделать корректный фон для ошибки?

Question

[frontAng]

Сейчас на фоне инпута он странно смотрится
https://jsbin.com/vifofamici/edit?html,css,output

Comments

[Ankhena]

У вас вопрос по верстке или всё таки по дизайну?

Answer 1

[Noder SS]

Мне такой вариант нравиться больше всего:

.item {
  position: relative;
}

input {
  width: 100%;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.23);
  background: rgba(101, 101, 101, 0.23);
  height: 90px;
  padding: 32px;
  
  display: block;
  outline: none;
  font-size: 16px;
  font-weight: bold;
}

.error {
   margin-left: -5px !important;
  
  font-size: 13px;
  color: #ed273f;
  font-family:Arial;
  padding: 5px;
  margin: 0px;
}

* {
  box-sizing: border-box;
}

body {
  padding: 50px;
  background: #000000;
}