質問編集履歴

2

書き直し

2020/07/07 05:12

投稿

soi
soi

スコア34

test CHANGED
File without changes
test CHANGED
@@ -60,6 +60,10 @@
60
60
 
61
61
  #追記
62
62
 
63
+ .log-form input{}により選択できるとの指摘を多く受けたので、こちらの場合の不具合の詳細について追記いたします。
64
+
65
+
66
+
63
67
  ```CSS
64
68
 
65
69
  .log-form input{

1

コメント頂いた方法でCSSを付けた時に起こる不具合と目標の再設定を行いました。

2020/07/07 05:12

投稿

soi
soi

スコア34

test CHANGED
File without changes
test CHANGED
@@ -55,3 +55,67 @@
55
55
  Google Chromeバージョン: 83.0.4103.116
56
56
 
57
57
  Apacheを使いローカル環境で確認しています
58
+
59
+
60
+
61
+ #追記
62
+
63
+ ```CSS
64
+
65
+ .log-form input{
66
+
67
+   background-color: red;
68
+
69
+ }
70
+
71
+ ```
72
+
73
+ このようにCSSで記入した場合、パスワードの欄だけが赤塗りになります。
74
+
75
+
76
+
77
+ ![イメージ説明](0b27b696c9c78f78631a5930b60771ec.png)
78
+
79
+
80
+
81
+ HTMLには問題がないと思うのですが。。
82
+
83
+ ```HTML
84
+
85
+ <div class="log-form">
86
+
87
+ <form>
88
+
89
+ <ul>
90
+
91
+ <li class="log-form-username">
92
+
93
+ <label for="name">ユーザーID</label>
94
+
95
+ <input type="text" title="username" placeholder="username" />
96
+
97
+ </li><br>
98
+
99
+ <li class="log-form-password">
100
+
101
+ <label for="name">パスワード</label>
102
+
103
+ <input type="password" title="password" placeholder="password" />
104
+
105
+ </li><br>
106
+
107
+ <li class="log-form-button">
108
+
109
+ <button type="submit" class="btn">Login</button>
110
+
111
+ </li><br>
112
+
113
+ </form>
114
+
115
+ ```
116
+
117
+
118
+
119
+ ゴールとしては、usernameとpasswordそれぞれの入力フォームを同じ形にした上で、CSSで触れるようにしたいです。
120
+
121
+ 見落としてる箇所わかる方いましたら、ご助言お願い致します。