inputに背景色がついてしまう

Question

以下の画像のように、input部分の背景色がグレーになってしまうので、background-color:none;を指定したのですが何も変わらず、どうしたら背景色をなくすことができるのか、ご教授いただきたいです。

お手数ですが、どうぞよろしくお願いいたします。

<template>
        <div class="input-info-wrapper">
          <div class="input-info margin-half-top margin-half-bottom">
            <div class="info mk-super-large-text">ID/氏名</div>
            <div class="info mk-large-text">
              <input class="text-box" type="text" v-model="textInput" />
            </div>
        </div>
      </div>
    </div>
</template>

<style lang="scss">
.text-box {
  background-color: transparent;
}
.input-info-wrapper {
  transform: translate(0%, -35%);
}
.input-info {
  display: flex;
  border-bottom: solid 0.5px black;
  justify-content: flex-start;
}
.info {
  margin: auto;
  border: none;
}
</style>

Comments

[m.ts10806]

Vue.jsの影響であれば現在の質問タグでは回答得られにくいと思います。
単にinputおいたときの色ではないですし。cssもそれだけでは正しく指定されたか不明です。

[m.ts10806]

あとそもそもnoneってなかったような。
https://developer.mozilla.org/ja/docs/Web/CSS/background-color

[pansuki]

ご返信ありがとうございます。
noneはなかったですね、調べ不足でした、すみません。

コードを詳細に記載しましたので、ご確認いただけるとありがたいです。

[K_3578]

なんで灰色になってるかデベロッパーツールで確認してみては。
cssが原因なら色が指定されているはず。

既に効いているものを無効にしたいなら
background-color:transparent;
では。

[Lhankor_Mhy]

とりあえず、 m.ts10806さんがおっしゃるとおり質問タグを変更されてはいかがでしょうか。
または、環境を書かれてはいかがですか？