有趣的input输入框

https://www.bilibili.com/video/BV1jL4y1b7tJ
FROM:B站UP：艾恩小灰灰

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>有趣的input输入框</title><link rel="stylesheet" href="../css/03.css">
</head><body><div class="wrapper"><div class="input-data"><!-- required :布尔值。表示此值为必填项或者提交表单前必须先检查该值 --><input type="text" required><div class="underline"></div><label>您的姓名</label></div></div>
</body></html>

* {margin: 0;padding: 0;outline: none;box-sizing: border-box;
}
body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: linear-gradient(200deg, #0c3483, #a2b6df);
}
body .wrapper {width: 450px;background-color: #fff;padding: 40px;box-shadow: 0, 0, 10px, rgba(0, 0, 0, 0.1);border-radius: 8px;
}
body .wrapper .input-data {position: relative;width: 100%;height: 40px;
}
body .wrapper .input-data input {width: 100%;height: 100%;border: none;font-size: 17px;border-bottom: 2px solid #c0c0c0;/*输入框获得焦点时*/
}
body .wrapper .input-data input:focus ~ label,
body .wrapper .input-data input:valid ~ label {transform: translateY(-25px);font-size: 15px;color: #2c6fdb;
}
body .wrapper .input-data input:focus ~ .underline,
body .wrapper .input-data input:valid ~ .underline {transform: scaleX(1);
}
body .wrapper .input-data label {position: absolute;bottom: 10px;left: 0;color: #999;pointer-events: none;transition: all 0.3S ease;
}
body .wrapper .input-data .underline {position: absolute;bottom: 0px;width: 100%;height: 2px;background-color: #2c6fdb;/*沿X轴缩小*/transform: scaleX(0);transition: all 0.3S ease;
}

required :布尔值。表示此值为必填项或者提交表单前必须先检查该值
input type=“text” required

有趣的input输入框相关推荐

input输入框为number类型时，去掉上下小箭头
input输入框type为number时,去掉上下小箭头,方式如下: <input type="number" ...><style>/* 在Chrome浏 ...
php监听input,jQuery如何实时监听获取input输入框的值
jQuery实时监听获取input输入框的值,在我们日常web项目开发也常需要去实现这样的功能效果.为了作出即时动作去引导浏览者,以便提高网站的用户体验感. 下面我们就结合具体的代码示例,为大家介绍j ...
移动端页面输入法挡住input输入框的解决方法
移动端页面输入法挡住input输入框的解决方法参考文章: (1)移动端页面输入法挡住input输入框的解决方法 (2)https://www.cnblogs.com/haqiao/p/7896922 ...
input输入框在移动端点击有阴影解决方法
input输入框在移动端点击有阴影解决方法参考文章: (1)input输入框在移动端点击有阴影解决方法 (2)https://www.cnblogs.com/dingjiujiu/p/6694332 ...
ios端 input输入框遮挡问题解决
ios端 input输入框遮挡问题解决参考文章: (1)ios端 input输入框遮挡问题解决 (2)https://www.cnblogs.com/yhweb/p/8873239.html (3) ...
移动端，input输入框被手机输入法解决方案
移动端,input输入框被手机输入法解决方案参考文章: (1)移动端,input输入框被手机输入法解决方案 (2)https://www.cnblogs.com/liuhappy/p/8809149 ...
html取输入框中的值,jquery获取input输入框中的值
如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML 一.jquery获取input文本框中的值通过 ...
html输入邮箱的文本框,自动生成邮箱号并填入input输入框的实现方法
我们在做网站表单的时候可能会用到自动填入邮箱,这里就教大家一个自动生成邮箱号并填入input输入框的实现方法. 这里以自动生成一个QQ邮箱并填入为例,先看看效果演示: 具体实现请看下面代码: * 邮箱 ...
Firefox浏览器中，input输入框输入的内容在刷新网页后为何还在？
转自:http://www.webym.net/jiaocheng/473.html 这个问题比较容易解决,如果不希望浏览器保留以前输入的内容,只要给对应的 input 输入框加上以下参数: auto ...

有趣的input输入框

有趣的input输入框

有趣的input输入框相关推荐

最新文章

热门文章