注册表单出现异常CSS效果，如何解决？

我刚开始学习HTML和CSS，制作注册表单时遇到问题：添加CSS样式后，点击输入框时表单区域的透明度出现异常变化（见动图）。

问题原因 #

问题出在.center容器的opacity: .5属性上——这个属性会让容器及其所有子元素都继承半透明效果，当输入框获得焦点时，浏览器默认的焦点样式与半透明容器叠加，就会产生视觉上的透明度变化错觉。

解决方案 #

将.center中的opacity: .5替换为background-color: rgba(0, 0, 0, 0.5)，这样仅让容器背景半透明，子元素（输入框、文字等）保持原本的不透明度，就能解决问题。

修改后的CSS代码：

.body{
    background-image: linear-gradient(to right top, #0b5ad0, #0794e7, #004093, #0069bf);
    height: 100vh;
    width: 100vw;
}

.center{
    display: inline-block;
    /* 替换opacity为rgba背景，仅让背景半透明 */
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    height: 50%;
    width: 50%;
    position: relative;
    left: calc(50%/2) ;
    top: 25%;
    border-radius: 10px;
    text-align: center;

}


.title{
    text-transform: uppercase;
    font-size: 2vh;
}

.cont{
    display: inline-block;
    width: 75%;
    text-align: left;
    position: relative;
    top: 0;
    margin-top: 0.5vh;
}

label{
    font-size: 1.5vh;
}

input{
    width: 100%;
    height: 30px;
    border-radius: 0.5vh;
    margin-top: 5px;
}

内容的提问来源于stack exchange，提问作者Damiano Miazzi