クリックしてログインフォームを出したときに、フォーム以外を暗くしたい

Question

写真のようになるのが理想です。

クリックしてログインフォームを出したときに、フォーム以外を暗くしてるのですがならないです、、
どこが間違っているのでしょうか。。
.black-bg これをdisplay:none;を消して非表示にしてないときは全体が暗くなります！イタリックテキスト
これを非表示にするとクリックしても表示されません。。。

<div class="all">

<div class="login background">
<h4>LOGIN</h4> 
 <label for="menu">会員</label>
 <label for="menu">一般会員</label>
<input type="checkbox" id="menu">
<div class="dropdown">
<form method="post" action="">
<h5>LOGIN ID</h5>
<input class="id" type="text" name="Id" value="">
<h5>PASSWORD</h5>
<input type="password" name="password" value="">
<input type="submit" name="go" value="ログイン" />
</form>

</div>
</div> 

<label class="black-bg" for="menu"></label>
</div>

.dropdown{
	display:none;
    position: fixed;
    top:10%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:50%;
    z-index: 11;	
	background-color:#FFF;
	padding:20px 0;
}
.dropdown input[type="submit"]{
	display:block;
	margin:auto;
	background: linear-gradient(#f0dc006e, #fcff042e);
	padding:0 20px;
	margin-top:10px;
}
	
.login label{
  display:block;
}
.login input[type="checkbox"]{
 display:none;
}
.login label[for="menu"]{
  display:block;
}
#menu:checked + .dropdown{
  display:block;
}
#menu:checked + .black-bg{
  display:block;
}

.black-bg {
	display:none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    background-color:#00000057;
    cursor: pointer;
    transition: all .3s;
	opacity:1;
}

Comments

[K_3578]

提示されているhtmlではそもそも<form>が閉じられてないですが

[ayuayuayu]

すいません。
閉じました。

[K_3578]

form以外を暗くしたい、というのはどのような状態を想定していますか？

[m.ts10806]

「クリックしてログインフォームを出す」部分も提示されないとなんとも言えません。
JavaScriptもあるのでしたらそちらも含めて、他者がコピペで現状再現できるようご配慮願います

[ayuayuayu]

写真のようになるのが理想です。

[K_3578]

元々は暗くなくて、.dropdownを展開したときだけ周りを暗くするって事で合ってます？

[ayuayuayu]

はい！！！
そうです！！！！

[K_3578]

jQueryでcheckboxがチェックされたときに発火するように実装したらいいのでは？
申し訳ないが私はこの後用事あるのでアドバイスだけに留めます。

[ayuayuayu]

はい。。
お忙しい中ありがとうございます。

Answer 1

質問者さんは<label class="black-bg" for="menu"></label>の位置を変えたらできたとおっしゃっていますが、本当でしょうか。

まずCSSの#menu:checked + .black-bgは#menu:checked ~ .black-bgじゃないとダメだと思います。
#menu:checked + .dropdownも#menu:checked ~ .dropdownのほうがいいですね。

そして背景色の変更が効くようにするためには、

.black-bg {
  background-color:#ffffff00;
}
#menu:checked ~ .black-bg{
  background-color:#00000057;
}

にする必要があるのではないかと思います。
displayを変更する必要はないでしょう。

Comments

[ayuayuayu]

はい。思った通りの動きになりました。
ですがitagagakiさんが教えてくださった書き方じゃないとダメなんですね！
ありがとうございます。変えてみます！

Answer 2

<div class="all">

<div class="login background">
<h4>LOGIN</h4> 
 <label for="menu">会員</label>
 <label for="menu">一般会員</label>
<input type="checkbox" id="menu">
<div class="dropdown">
<form method="post" action="">
<h5>LOGIN ID</h5>
<input class="id" type="text" name="Id" value="">
<h5>PASSWORD</h5>
<input type="password" name="password" value="">
<input type="submit" name="go" value="ログイン" />
</form>

</div>

<label class="black-bg" for="menu"></label>
</div> 

</div>

<label class="black-bg" for="menu"></label>の位置を変えたらできました。。。