質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.37%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

9418閲覧

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

taka211

総合スコア17

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/06/17 11:43

前提・実現したいこと

ログインフォームのコーティングをしています。
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}

試したこと

リセットcssの何かが影響しているのかと思ったが、bg-krg外では正常だったので関係なかった。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/06/17 11:45

>リセットcss これだけではどれを使っているか分からないので 取得先かコードを提示してください。
taka211

2021/06/17 11:55

リセットcssがdestyle.cssということでした。
m.ts10806

2021/06/17 11:56

取得先かコードを提示してください。
guest

回答1

0

ベストアンサー

<div class="bg-krg">全体にz-index: -2がかかっているので、この要素と中身の子孫要素がブラウザの背景より後ろ側に回っています・

投稿2021/06/17 11:45

maisumakun

総合スコア145932

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

taka211

2021/06/17 12:08

なるほどです!そりゃそうですね。。。 この度はありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問