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

Question

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

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

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

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

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

<div class="mail-button">
  <input type="email" name="email">
	<button class="button-green" type="submit" id="submit">
    メールアドレスを追加
  </button>
</div>

*{
  background-color: gray;
}
button{
　margin: 0 ;
　padding: 12px 17px;
　font-size: 14px;
　font-weight: 600;
　line-height: 14px;
　color: #ffffff;
  background-color: #008489;
  border-radius: 5px;
  border-style: none;
}
.mail-button{
  position: relative;
}
.button-green{
  position: absolute;
  top: 20px;
  left: 300px;
  opacity:0.5;
}

input:focus{
  background-color: ;
  }

input{
  background-color: white;
　　width: 450px;
　　height: 40px;
　　padding: 10px 20px;
　　margin: 10px 0;
　　font-size: 18px;
　　border-radius: 5px;
　　border: 0px white;
　　position: relative;
}

Comments

[m.ts10806]

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

[synth]

。

[m.ts10806]

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

Answer 1

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

Comments

[synth]

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

[H40831]

input:valid ~ #submit{
opacity:1;
}

で出来ませんか？？

[synth]

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

[H40831]

拝見しました。
opacity: 0.5 をつけているのは .button-green のようなので、
opacity: 1 で上書きしなきゃいけないのも ,button-green となります。

具体的には
input:valid ~ .button-green{
　opacity:1;
}
となります。

[synth]

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

[H40831]

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

[synth]

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

Answer 2

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

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

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

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

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

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

Comments

[synth]

ありがとうございます。
違った方法で、解決できましたが引き続き試してみたいと思います。

リンクやヒントも頂きありがとうございます！

Answer 3

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

*{
  background-color: gray;
}

input {
  position: relative;
  background-color: white;
  width: 400px;
  height: 50px;
  border-radius: 7px;
  border-style: none;
  padding: 5px 15px;
  font-size: 16px;

  &:valid ~ button{
    background-color: #008489;
  }
}

button{
    margin: 0 ;
    padding: 12px 17px;
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    color: #ffffff;
    background-color: #91C4C6;
    border-radius: 5px;
    border-style: none;

    position: absolute;
    top: 19px;
    left: 250px;
}