In my React application, I created a form with two fields: one for the username and one for the password. Each field has a label placed above it. The goal is to have the label shift up slightly, decrease in size, and change color when the user clicks on the text field. While I have successfully implemented this design using HTML and CSS mockups, the functionality does not work properly once integrated into the React application. The issue seems to be that the label's color changes automatically without requiring the user to click on the text field. https://i.sstatic.net/i9YoS.png
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
font-size: 60px;
text-align: center;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
padding: 40px;
background: rgba(0,0,0,.7);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0,0,0, .5);
border-radius: 10px;
}
.box h2
{
margin: 0 0 0px;
padding: 0;
color: white;
text-align: center;
}
.box .inputBox{
position: relative;
}
.box .inputBox input{
width: 100%;
padding: 10px 0;
font-size: 16px;
color: white;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid white;
outline: none;
background: transparent;
}
.box .inputBox label{
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: white;
pointer-events: none;
transition: .5s;
}
.box .inputBox input:focus ~ label, //this is the code for the special effects
.box .inputBox input:valid ~ label
{
top: -18px;
left: 0;
color: #5100c9;
font-size: 12px;
}
.box input[type="submit"]{
background: transparent;
border: none;
outline: none;
color: white;
background: #5100c9;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
}
.box input[type="submit"]:hover{
font-weight: bold;
}