Как сделать так, чтобы метка MetroCSS всегда показывалась?

Question

Есть 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&eacute;" 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&eacute;</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.

Answer 1

Просто добавьте эту CSS на свою страницу

.input-control.modern input ~ .label {
    opacity: 1;
    transform: translateY(-18px);
    transition: all 0.3s linear 0s;
}

Answer 2

Ключ должен использовать 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