我在反應應用程序中實現了一個表單，它有兩個字段，一個用于用戶名，一個用于密碼。兩者的文本字段上都有標簽。一旦用戶單擊文本字段，標簽就會向上移動一點，并且尺寸也會減小并改變顏色。我已經有一個 HTML 和 css 模型，它工作正常，但是一旦我在 React 應用程序中實現它，它就不起作用，并且顏色已經更改，而無需單擊文本字段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;     }