如何使 MetroCSS 标签始终显示?
How to make MetroCSS label always shown?
有一个 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。
关键是要用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
只需将此 css 添加到您的页面
.input-control.modern input ~ .label {
opacity: 1;
transform: translateY(-18px);
transition: all 0.3s linear 0s;
}
有一个 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。
关键是要用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
只需将此 css 添加到您的页面
.input-control.modern input ~ .label {
opacity: 1;
transform: translateY(-18px);
transition: all 0.3s linear 0s;
}