头像

纯CSS的输入框提示信息标签浮动特效【原创

来源:http://www.sucaihuo.com/js/3119 richer 2017-09-30 21:56浏览(208) 收藏

一款纯CSS的输入框输入信息标签浮动特效,当输入框有信息输入的时候,提示标签自动浮动到输入框的上方,提示标签的内容可以自由设置。
纯CSS的输入框提示信息标签浮动特效
分类:表单代码 > 输入框 难易:初级

程序员,你不是一个人;网站开发QQ群:35291327 在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 1 下载资源 下载积分: 20 积分

页面的head部分,需引入页面的样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分,需设置好输入框和提示信息标签的内容,代码如下:

<div class="Wrapper">
  <h1 class="Title">输入框输入信息标签浮动</h1>
  <div class="Input">
    <input type="text" id="input" class="Input-text" placeholder="请输入您的姓名">
    <label for="input" class="Input-label">姓名</label>
  </div>
</div>
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:http://www.sucaihuo.com/js/3119.html
评论11
头像

友情提示:垃圾评论一律封号,下载出错或者资源有问题请联系全栈客服QQ 416148489

  • 头像 10楼
    前天 10-18 22:19
    漠漠轻寒
    效果不错!!
  • 头像 9楼
    前天 10-18 14:42
    一叶一追寻
    学习了.......
  • 头像 8楼
    10-13 17:56
    sa0201
    效果不错!!
  • 头像 7楼
    10-10 18:24
    qzuser
    学习一下了
  • 头像 6楼
    10-10 07:48
    请叫我JAVA杀神
    效果不错!!
  • 头像 5楼
    10-09 14:33
    ehgoo
    很有用处哦
  • 头像 4楼
    10-09 11:42
    xiaogan
    哎呦喂!不错哦
  • 头像 3楼
    10-03 09:38
    新来的,给我去买包辣条来
    不错,值得学习!
  • 头像 板凳
    10-03 08:28
    qqlixiangabc
    学习啦,特效真好!!!。。。。
  • 头像 椅子
    10-01 21:43
    zjqstar
    手机端显示不够好
    1
    richer

    这个是没有做完美的移动端适应的,可自行设置CSS样式来达到自己想要的效果。

1 2