html - 如何使用 css 和 bootstrap 创建材料设计输入表单?
问题描述
我想使用 css 和 bootstrap 设计以下材料设计输入表单。以下代码是我目前正在使用的。但它没有提供我想要的确切结果。
代码笔链接:在此处查看源代码
HTML 代码:
<div class="container">
<h2>Google Material Design in CSS3<small>Inputs</small></h2>
<form>
<div class="group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>
<div class="group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Email</label>
</div>
</form>
<p class="footer">
a <a href="https://scotch.io/tutorials/css/google-material-design-input-boxes-in-css3" target="_blank">tutorial</a> by <a href="https://scotch.io" target="_blank">scotch.io</a>
</p>
</div>
但我想要这个设计:
解决方案
仅 CSS 解决方案;使用~
标签上的兄弟选择器和:valid
输入上的伪选择器的组合。
body {
margin: 10px;
}
.form-group>label {
bottom: 34px;
left: 15px;
position: relative;
background-color: white;
padding: 0px 5px 0px 5px;
font-size: 1.1em;
transition: 0.2s;
pointer-events: none;
}
.form-control:focus~label {
bottom: 55px;
}
.form-control:valid~label {
bottom: 55px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-6">
<br>
<div class="form-group">
<input type="text" class="form-control" id="usr" required>
<label for="usr">Name</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="password" required>
<label for="usr">Password</label>
</div>
</div>
</div>
</div>
推荐阅读
- apache-spark - spark JDBC sink 在节点级别是事务安全的吗?
- symfony - Symfony:日期时间属性字符串约束冲突
- reactjs - 反应原生 Stylesheet.absoluteFillObject 不覆盖标签栏以制作应用内消息
- c# - 如何从字符串中获取句子 C# 字符串操作
- flutter - Dart 是否重用 DateTime 实例?
- css - :nth-child 选择的元素比预期的多
- windows - 在 Windows cmd 中拒绝访问,但在 PowerShell 中工作
- vim - Vim:通过被动 (PASV) 模式编辑 FTP 服务器上的文件
- angular - 根据特定条件过滤数组对象 -typescript
- angular - 从 Angular 8 更新到 9 时位置 0 的值