网站建设讨论会,直接做的视频网站,wordpress 主题 最简单,欧美风企业网站 英文模板页面效果 此效果主要使用 css 伪选择器配合 html5 required 属性来实现一个简单的输入框的交互效果。 此效果可适用于登录页入口、小表单提交等页面#xff0c;增强用户实时交互体验。 核心代码部分#xff0c;简要说明了写法思路#xff1b;完整代码在最后#xff0c;可直…页面效果 此效果主要使用 css 伪选择器配合 html5 required 属性来实现一个简单的输入框的交互效果。 此效果可适用于登录页入口、小表单提交等页面增强用户实时交互体验。 核心代码部分简要说明了写法思路完整代码在最后可直接复制到本地运行。
核心代码
html代码
labelinput typetext requiredspan用户名/span
/label页面主要使用 label 与 input 标签注意 input 中使用 required 属性来判断 input 是否为空。 css代码
label{width: 240px;position: relative;display: flex;align-items: center;
}
input{width: 240px;height: 32px;line-height: 32px;padding: 0 10px;border: 2px solid transparent;border-bottom-color: #333;background-color: transparent;box-sizing: border-box;transition: all 0.3s;font-size: 14px;color: #333;
}
span{position: absolute;font-size: 14px;color: #999;left: 10px;cursor: text;z-index: 1;transition: all 0.3s;
}
label:hover input,input:focus{border-color: blue;border-radius: 8px;
}
input:focusspan,input:validspan{transform: translateY(-32px);
}使用选择器 :hover 、:foucus 来获取鼠标状态根据不同鼠标的不同状态来设置样式以及过渡效果使用 :valid 来验证 input 值。 完整代码
html页面
!DOCTYPE html
html langzhheadmeta charsetutf-8link relstylesheet hrefstyle.csstitle输入框选中交互动效/title/headbodydiv classapplabelinput typetext requiredspan用户名/span/label/div/body
/htmlcss样式
.app{width: 100%;height: 100vh;position: relative;display: flex;justify-content: center;align-items: center;
}
input{list-style: none;outline-style: none;
}
label{width: 240px;position: relative;display: flex;align-items: center;
}
input{width: 240px;height: 32px;line-height: 32px;padding: 0 10px;border: 2px solid transparent;border-bottom-color: #333;background-color: transparent;box-sizing: border-box;transition: all 0.3s;font-size: 14px;color: #333;
}
span{position: absolute;font-size: 14px;color: #999;left: 10px;cursor: text;z-index: 1;transition: all 0.3s;
}
label:hover input,input:focus{border-color: blue;border-radius: 8px;
}
input:focusspan,input:validspan{transform: translateY(-32px);
}页面效果 以上就是全部代码以及简单的写法思路希望你喜欢这个交互输入框。 [1] 原文阅读
我是 Just这里是「设计师工作日常」求点赞求关注
