html input要素入力欄でなぜか入力できない

前提・実現したいこと

ログインフォームのコーティングをしています。
htmlにてinput要素でなぜか入力ができません。

そのサイトは背景に画像を設定し、暗めにするために薄黒の背景を::before要素でかぶせていて、その上にフォーム入力欄を作るのですが、
その背景の<div>要素外では入力ができました。

原因が分からず困惑しております。

リセットcss
destyle.css

該当のソースコード

html
1
2  <div class="bg-krg">
3～～～～～～～～～～～～～～ 
4      <div class="login-form__form">
5          <input type="tel" placeholder="電話番号" name="" value="">
6      </div>
7～～～～～～～～～～～～～～
8  </div>
9  <!-- /.bg-krg -->

css
1.bg-krg {
2    padding: 120px 0;
3    position: relative;
4    min-height: 100vh;
5    background-image: url(../img/~.png);
6    background-position: center center;
7    background-repeat: no-repeat;
8    background-attachment: fixed;
9    background-size: cover;
10    z-index: -2;
11}
12.bg-krg::before {
13    position: absolute;
14    content: "";
15    background-color: rgba(0, 0, 0, 0.8);
16    top: 0;
17    right: 0;
18    left: 0;
19    bottom: 0;
20    z-index: -2;
21}
22
23.login-form__form input {
24    background-color: #ffffff;
25    height: 30px;
26    width: 100%;
27    padding-left: 37px; //アイコン入れるため
28}
29.login-form__form--phone input[type="tel"] {
30    font-size: 0.75rem;
31}