建议将非响应输入字段转换为响应字段

Question

我在某处找到了这个例子，发现我不使用它很漂亮。复制粘贴代码的缺点是大多数时候它没有以您想要的方式响应。我的问题是，是否有一些基本规则或"键"可以更轻松地将无响应更改为响应？我一直在为此苦苦挣扎，因为在此示例中，您不能只是将高度更改为 100% 而不是 40px，但您还需要计算像素的自定义更改。提前感谢！

/*------------------------------------------------------------------
[ Input ]*/
a:link {color: grey; text-decoration: none;}      /* unvisited link */
a:visited {color: grey; text-decoration: none;}   /* visited link */
a:hover {color: grey; text-decoration: none;}     /* mouse over link */
a:active {color: grey; text-decoration: none;}    /* selected link */
input  {   
background: transparent;
border: none;
width:100%;
text-align:center;
font-size:1em;
color:white;
}
input:focus{
outline: none;
}
.wrap-input100 {
width: 100%;
position: relative;
border-bottom: 2px solid #adadad;
margin: 2%;
}
.input100 {
font-family: Poppins-Regular;
font-size: 12px;
color: #555555;
line-height: 1.2;
text-align:left;
display: block;
width: 100%;
height: 40px;
background: transparent;
padding: 0 5px;
}
/*---------------------------------------------*/ 
.focus-input100 {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.focus-input100::before {
content: "";
display: block;
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
background: #6a7dfe;
background: -webkit-linear-gradient(left, #21d4fd, #b721ff);
background: -o-linear-gradient(left, #21d4fd, #b721ff);
background: -moz-linear-gradient(left, #21d4fd, #b721ff);
background: linear-gradient(left, #21d4fd, #b721ff);
}
.focus-input100::after {
font-family: Poppins-Regular;
font-size: 15px;
color: #999999;
line-height: 1.2;
content: attr(data-placeholder);
display: block;
width: 100%;
position: absolute;
top: 16px;
left: 0px;
padding-left: 5px;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.input100:focus + .focus-input100::after {
top: -15px;
}
.input100:focus + .focus-input100::before {
width: 100%;
}
.has-val.input100 + .focus-input100::after {
top: -15px;
}
.has-val.input100 + .focus-input100::before {
width: 100%;
}


.innerMargin {
padding: 10% 0% 10% 0%;
width: 100%;
background-color: #21d4fd;  
border-radius: 1em;
text-align: center;
}
.button {
color:white;
}

<div class="wrap-input100 validate-input">
<input class="input100" type="password" name="confirm_password" class="form-control">
<span class="focus-input100" data-placeholder="password"></span>
</div>

Answer 1

只需在div的类中添加col-sm-12，但您需要引导才能使其工作。请参阅此处的示例 引导 4 网格。

<div class="wrap-input100 validate-input col-sm-12">
<input class="input100" type="password" name="confirm_password" class="form-control">
<span class="focus-input100" data-placeholder="password"></span>
</div>