1

があり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があります。

4

2 に答える 2

2

このCSSをページに追加するだけです

.input-control.modern input ~ .label {
    opacity: 1;
    transform: translateY(-18px);
    transition: all 0.3s linear 0s;
}
于 2015-11-26T08:29:35.113 に答える