Question

我正在使用HTML和CSS探索网页的Float Label模式。该代码来自 http://codepen.io/boast/pen/pLjld

<input type="text" name="title" placeholder="Title required" />

问题是＆＃34;必需＆＃34;属性必须在这里有浮动标签效果。想了解我们如何实现可选输入字段的浮点标签效果？

Answer 1

最佳解决方案是将:placeholder-shown伪类与:focus和+相邻选择器结合使用：

https://github.com/tonystar/float-label-css

此方法适用于任何浏览器（所有不支持的浏览器将自动回退到没有动画的静态布局）。

见下面的演示：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"/>
<link rel="stylesheet" href="https://cdn.rawgit.com/tonystar/float-label-css/v1.0.0/dist/float-label.min.css"/>

<fieldset>
  <legend>Sign up</legend>

  <div class="form-group has-float-label">
    <input class="form-control" id="first" type="text" placeholder="First Last"/>
    <label for="first">Name</label>
  </div>

  <div class="form-group has-float-label">
    <input class="form-control" id="email" type="email" placeholder="email@example.com"/>
    <label for="email">Email</label>
  </div>

  <div class="form-group has-float-label">
    <input class="form-control" id="password" type="password" placeholder="••••••••"/>
    <label for="password">Password</label>
  </div>
  
  <br/>

  <button>Sign up</button>
</fieldset>

Answer 2

您可以使用可选的伪类。
https://developer.mozilla.org/en-US/docs/Web/CSS/:optional

请看下面的示例 http://codepen.io/anon/pen/bdaHk

Answer 3

Click here to view Demo

HTML

<form id="formID" action="demo_form.asp">
    <label for="fname" id="lblfname" >First name </label><br> 
  <input type="text" id="fname" name="fname" placeholder="First name"><br>
  <label for="lname" id="lbllname" >Last name </label><br>      
  <input type="text" id="lname" name="lname" placeholder="Last name"><br>
  <input type="submit" value="Submit">
</form>

的CSS

label{
visibility:hidden;
   z-index:1; 
    font-size:10px;
}

Jquery的

$('#fname').focus(function () {
    var offset = $(this).offset();
    var xPos = offset.left;
    var yPos = offset.top;
    alert(xPos);
    alert(yPos);
    var myid = this.id;
    var res = $('label[for=' + myid + ']').attr('id');
    var offset1 = $("#" + res + "").offset();
    offset1
    var xxPos = offset1.left;
    var yyPos = offset1.top;
    alert(xxPos);
    alert(yyPos);
   $("#"+ res).css({ visibility: "visible"});
$("#"+ res).css({
    top: xPos + 17,
    left: yPos + 80,
    position: 'absolute'
});
alert(res);
});
$('#lname').focus(function () {
    var offset = $(this).offset();
    var xPos = offset.left;
    var yPos = offset.top;
  //  alert(xPos);uncomment and run this to get top
 //   alert(yPos);uncomment and run this to get left
    var myid = this.id;
    var res = $('label[for=' + myid + ']').attr('id');
    var offset1 = $("#" + res + "").offset();
    offset1
    var xxPos = offset1.left;
    var yyPos = offset1.top;
  //   alert(xxPos);uncomment and run this to get top
 //    alert(yyPos);uncomment and run this to get top

   $("#"+ res).css({ visibility: "visible"});
$("#"+ res).css({
    top: xPos + 65,
    left: yPos +35,
    position: 'absolute'
});
alert(res);
});

$("input").blur(function(){
$('#formID').find('label').each(function(){
  $(this).css({ visibility: "hidden"});;
});
});

HTML CSS浮点标签模式 - 处理可选字段

3 个答案:

HTML

的CSS

Jquery的