input-control
有一个label
:
<div class="input-control modern text" data-role="input">
<input name="salle_lib" id="salle_lib" type="text" maxlength="70" placeholder="libellé" data-validate-func="required" data-validate-hint="Ce champ est obligatoire"/>
<button class="button helper-button clear"><span class="mif-cross"></span></button>
<span class="label">libellé</span> // this is the label
</div>
MetroCSS 的默认行为是,当点击input-control
时,会显示标签:
.input-control.text > .label {
position: absolute;
left: 0;
top: -1rem;
font-size: .875rem;
}
.input-control.modern input:focus ~ .label {
opacity: 1;
-webkit-transform: translateY(-18px);
transform: translateY(-18px);
transition: all 0.3s linear;
}
即使未单击输入控件,我也希望始终显示此标签。我试过$(".input-control.text").click();
但它没有用!那怎么办?
这里是jsfiddle。
答案 0 :(得分:2)
只需将此css添加到您的页面
即可.input-control.modern input ~ .label {
opacity: 1;
transform: translateY(-18px);
transition: all 0.3s linear 0s;
}
答案 1 :(得分:0)
关键是使用focus
。我懂谁?因为你可以看到css的选择器是例如:.input-control.modern input:focus ~ .label
$('input').trigger('focus');
/* if you want to avoid the animation at the start
.modern.text * {
transition:none !important;
}
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://metroui.org.ua/js/metro.js"></script>
<link href="http://metroui.org.ua/css/metro.css" rel="stylesheet">
<div class="input-control modern text " data-role="input">
<input type="text" style="padding-right: 5px;">
<span class="label">You login</span>
<span class="informer">Please enter you login or email</span>
<span class="placeholder" style="display: block;">Input login</span>
</div>
更新演示:jsbin