1
我想用文字製作一個響應式密碼強度條。在更大尺寸的輸入上，它會在進度條和文本之後佔用很大的空間。響應進度條
你可以看到它在我JSFiddle（只要改變大小例如窗口）的
而且有代碼
.password-strength{
width: 100%;
margin-top: 10px;
}
.password-strength>span{
background: transparent!important;
width: 35%;
display: inline-block;
text-align: right;
}
.progress-bar{
width: 80%;
height: 1px;
background: #dedede;
display: -webkit-inline-box;
width: 63%;
height: 1px;
background: #dedede;
}
.progress-bar>div{}
.progress-bar .danger, .password-strength .danger{
background: #f2373e;
color: #f2373e;
}
.progress-bar .acceptable, .password-strength .acceptable{
background: #64aa64;
color: #64aa64;
}
.progress-bar .strong, .password-strength .strong{
background: #0099ff;
color: #0099ff;
}
.input-field{
max-width: 100%;
position: relative;
margin: 60px auto;
}
.input-field-width{
border: 1px solid black;
width: 100%;max-width:700px;height: 45px;
}
@media(max-width:250px){
.progress-bar{width:100%}
}<div class="input-field">
\t \t \t <div class="input-field-width"></div>
\t \t \t <div class="password-strength-overflow">
\t \t \t \t <div class="password-strength">
\t \t \t \t \t <div class="progress-bar"><div class="danger" style="width:30%;"></div></div>
\t \t \t \t \t <span class="danger">Very weak</span>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>任何建議什麼，我需要做？