Не меняется поле для ввода текста

Question

Я использую bootstrap 5, и мне нужно изменить стиль поля для ввода текста, но когда я меняю стили в CSS я не получаю нужного результата. Вот CSS код:

input{
    background-color: rgba(0, 0, 0, 0) !important;
    border-radius: 0px;
    border-bottom: 10px !important;
    caret-color: #fff !important;
    border-bottom-color: #fff !important;
}

Что я хочу примерно получить:

И Вот что я получил в итоге:

Answer 1

Вам так нужно? или проблема в чем-то другом?

.test {
  background-color: #000;
  height: 400px;
}

input {
  background-color: rgba(0, 0, 0, 0) !important;
  border-radius: 0px !important;
  border-bottom: 6px solid #fff !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  caret-color: #fff !important;
  color: #fff !important;
}

input[type=text]::placeholder {
  font-size: 24px;
  color: #fff;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="test">
  <form>
    <div class="mb-3">
      <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Find job">
    </div>
  </form>
</div>

БЛОГ НА HUSL

Не меняется поле для ввода текста

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