inputに正しく入力された時だけsubmitを有効にしたい

リンク先はcodepenとなっています。
こちらに載せているコードと同じものです。
リンク内容

[実現したい機能]
inputに文字が入力された時、submitのopacityを1にしたい。
そのような動きができるのか、初心者のため分かりません。

[試した事]
inputに入力(メールアドレス）があった際に、inputの要素を変更することはできましたが、
submitの要素を変更することができない。

[現在の問題]
inputに入力（メールアドレス）があった際に、submitの要素を変更することができない。

HTML、CSSにそのような機能をもつ、プロパティや要素があるのかどうかも分からない。

HTML
1<div class="mail-button">
2  <input type="email" name="email">
3	<button class="button-green" type="submit" id="submit">
4    メールアドレスを追加
5  </button>
6</div>

CSS
1*{
2  background-color: gray;
3}
4button{
5　margin: 0 ;
6　padding: 12px 17px;
7　font-size: 14px;
8　font-weight: 600;
9　line-height: 14px;
10　color: #ffffff;
11  background-color: #008489;
12  border-radius: 5px;
13  border-style: none;
14}
15.mail-button{
16  position: relative;
17}
18.button-green{
19  position: absolute;
20  top: 20px;
21  left: 300px;
22  opacity:0.5;
23}
24
25input:focus{
26  background-color: ;
27  }
28
29input{
30  background-color: white;
31　　width: 450px;
32　　height: 40px;
33　　padding: 10px 20px;
34　　margin: 10px 0;
35　　font-size: 18px;
36　　border-radius: 5px;
37　　border: 0px white;
38　　position: relative;
39}
40
41
42

m.ts10806

2020/02/03 20:41

まずは思うように組んでください。それに、何も説明がなく「リンク内容」とだけ提示されても見ようとは思いません。何を踏まされるか分かりませんからね。

synth

2020/02/06 14:23 編集

。

m.ts10806

2020/02/04 20:15

で、現在の問題は何でしょうか。質問が書かれていません。（２回目）何も説明がなく「リンク内容」とだけ提示されても見ようとは思いません。何を踏まされるか分かりませんからね。

行動規範の内容に同意します

回答3件

ベストアンサー

どうぞ
https://q-az.net/css4-valid-invalid/

投稿2020/02/03 15:35

H40831

総合スコア975

synth

2020/02/05 00:20

ありがとうございます。 valid-invalidを使って、inputの要素を変更することができました。 inputに入力があった際に、submitの要素を変更したいのですが、そのようなことはできるのでしょうか。

H40831

2020/02/05 02:05

input:valid ~ #submit{ opacity:1; } で出来ませんか？？

synth

2020/02/06 14:23

うまくいきません。。。初歩的なこと、根本的なこと理解できていないかもしれません。もしよければリンク先のcodepenも見てもらえないでしょうか。

H40831

2020/02/06 16:42

拝見しました。 opacity: 0.5 をつけているのは .button-green のようなので、 opacity: 1 で上書きしなきゃいけないのも ,button-green となります。具体的には input:valid ~ .button-green{ 　opacity:1; } となります。

synth

2020/02/07 01:47

ありがとうございます！できました！最終的には、opacityではなく、バックグラウンドカラーを変更することで、思っていたことが実現しました。

H40831

2020/02/07 16:00 編集

解決したようで何よりです。また今後も学習を続けられるようでしたら、 HTMLやCSSでは実現できない様々な細かい要望も実現できるJavaScriptという言語がありますので、余裕があるときにきちんとしたレッスンの資料を参考にして、是非チャレンジしてみてください。 (本来このような機能をしっかり作る場合、さらにPHPなどのバックエンド言語も使われますが、とりあえずJavaScriptのほうが現代的で楽しく覚えられるとおもいます。)

synth

2020/02/08 16:33

今後もがんばります！ JavaScript PHPどちらも勉強したいと思っていました！貴重なアドバイスありがとうございます！！

行動規範の内容に同意します

CSS
1input:valid ~ .button-green {
2  opacity: 1;
3}

https://developer.mozilla.org/ja/docs/Web/CSS/:valid

として入力し始めると意図に反して半透明になると思うかもしれませんが、メールアドレスとして妥当な入力でないためです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/email

未入力でも半透明にしたいということであれば required 属性を付けてください

HTML
1  <input type="email" name="email" required="required" />

https://developer.mozilla.org/ja/docs/Web/HTML/Element/input#required

投稿2020/02/07 01:48

x_x

総合スコア13749

synth

2020/02/07 01:58

ありがとうございます。違った方法で、解決できましたが引き続き試してみたいと思います。リンクやヒントも頂きありがとうございます！

行動規範の内容に同意します

HTML
1<input type='email'  required>
2<button class="button-green" type="submit" id="submit">
3    メールアドレスを追加
4  </button>

CSS(SCSS)
1*{
2  background-color: gray;
3}
4
5input {
6  position: relative;
7  background-color: white;
8  width: 400px;
9  height: 50px;
10  border-radius: 7px;
11  border-style: none;
12  padding: 5px 15px;
13  font-size: 16px;
14
15  &:valid ~ button{
16    background-color: #008489;
17  }
18}
19
20button{
21    margin: 0 ;
22    padding: 12px 17px;
23    font-size: 14px;
24    font-weight: 600;
25    line-height: 14px;
26    color: #ffffff;
27    background-color: #91C4C6;
28    border-radius: 5px;
29    border-style: none;
30
31    position: absolute;
32    top: 19px;
33    left: 250px;
34}