https://i.sstatic.net/ENpqW.jpg
In the image linked above, there is a scenario where the create button and password inputs are initially disabled. When the user verifies their email address, the create button becomes enabled. The challenge is to use CSS to enable these two inputs based on the state of the button.
This task involves integrating with a third-party login system that restricts the use of JavaScript and other technologies. Therefore, the solution must be implemented using only CSS.
<div class="section1">
<ul>
<li>
<label>Email Address</label>
<input id="email">
<button type="submit">Send verification code</button>
</li>
<li>
<label>New Password</label>
<input id="pwd" disabled>
</li>
<li>
<label>Confirm Password</label>
<input id="cnfpwd" disabled>
</li>
</ul>
</div>
<div class="section2">
<button type="submit" **id="create"** disabled>create</button>
<button type="submit">cancel</button>
</div>
<!-- CSS -->
label{
width:100%;
display:block;
}
input{
display:block;
}
The objective is to use CSS to enable the inputs in section1 based on the status of the button in section2.