html - How to create text field similar to Material UI text field without using Material UI library?
问题描述
Using pure HTML, CSS, Reactjs
I want to make placeholder to move up to the border when you click on the text field
example for Material UI text field: https://material-ui.com/components/text-fields/
解决方案
You can find many alternate options using pure html5 and css.
Following is an example
<div class="form__group">
<input type="email" id="email" class="form__field" placeholder="Your Email">
<label for="email" class="form__label">Your Email</label>
</div>
<div class="form__group">
<textarea id="message" class="form__field" placeholder="Your Message" rows="6"></textarea>
<label for="message" class="form__label">Your Message</label>
</div>
and css
@import url(https://fonts.googleapis.com/css?family=Roboto);
html {
font-family: 'Roboto', sans-serif;
}
.form__group {
position: relative;
padding: 15px 0 0;
margin-top: 10px;
}
.form__field {
font-family: inherit;
width: 100%;
border: 0;
border-bottom: 1px solid #d2d2d2;
outline: 0;
font-size: 16px;
color: #212121;
padding: 7px 0;
background: transparent;
transition: border-color 0.2s;
}
.form__field::placeholder {
color: transparent;
}
.form__field:placeholder-shown ~ .form__label {
font-size: 16px;
cursor: text;
top: 20px;
}
label,
.form__field:focus ~ .form__label {
position: absolute;
top: 0;
display: block;
transition: 0.2s;
font-size: 12px;
color: #9b9b9b;
}
.form__field:focus ~ .form__label {
color: #009788;
}
.form__field:focus {
padding-bottom: 6px;
border-bottom: 2px solid #009788;
}
as given in this example here
推荐阅读
- php - 如何在首页(wordpress)上仅显示来自post_type的一篇文章
- javascript - 模态弹出窗口的关闭动画
- angular - 如果用户正在访问它,则在我的网站中显示自定义通知,并且仅当用户没有关注我的网站选项卡时才显示推送通知
- common-lisp - 在 commonlisp 的嵌套列表中替换字符串
- testing - 在 Cucumber 中,Before 和 After 钩子在哪里
- c# - 语句执行但不将文本附加到 TextBox
- swift - SwiftUI 状态初始化器之间的区别
- python - 从另一个数组python为每个元素创建数组
- jquery - jquery需要在点击时切换文本并在第二次点击时再次切换回来
- java - Heroku 构建失败,因为缺少 npm