HTML&CSS:领导说这个表单很不错,快来体验吧

这段代码是一个简单的HTML页面,它包含了一些CSS样式来美化两个输入框(用于用户名和密码)

演示效果

HTML&CSS

html 复制代码
<!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>前端Hardy</title>
    <style>
        body {
            background-color: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100vh;
        }

        .container {
            width: 500px;
            height: 260px;
            background-color: #212121;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .inputGroup {
            font-family: 'Segoe UI', sans-serif;
            margin: 1em 0 1.5em 0;
            max-width: 190px;
            position: relative;
        }

        .inputGroup input {
            font-size: 100%;
            padding: 0.8em;
            outline: none;
            border: 2px solid rgb(200, 200, 200);
            background-color: transparent;
            border-radius: 20px;
            width: 100%;
            color: #fff;
        }

        .inputGroup label {
            font-size: 100%;
            position: absolute;
            left: 0;
            margin-left: 0.5em;
            pointer-events: none;
            transition: all 0.3s ease;
            color: #fff;
        }

        .inputGroup :is(input:focus, input:valid)~label {
            transform: translateY(-200%) scale(.9);
            margin: 0em;
            margin-left: 1.3em;
            padding: 0.4em;
            background-color: #212121;
        }

        .inputGroup :is(input:focus, input:valid) {
            border-color: rgb(150, 150, 200);
        }

        input::placeholder {
            color: #fff;
            font-size: 12px;
            text-align: center;
            opacity: 0.8;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="inputGroup">
            <input type="text" required="" autocomplete="off" placeholder="输入用户名">
            <label for="name">用户名</label>
        </div>
        <div class="inputGroup">
            <input type="text" required="" autocomplete="off" placeholder="输入密码">
            <label for="name">密码</label>
        </div>
    </div>


</body>

</html>
  • container: 一个容器,用于居中显示输入框。设置容器的尺寸、背景颜色、圆角和布局。
  • inputGroup: 包含一个输入框和标签的组。设置输入组的字体、边距和最大宽度。
  • input type="text": 用户名输入框,设置为必填且不允许浏览器自动填充。
  • label for="name": 用户名的标签,用于提高可访问性。
  • inputGroup:包含密码输入框和标签,结构与用户名输入框相同
  • .inputGroup input: 设置输入框的字体大小、内边距、边框和背景颜色。
  • .inputGroup label: 设置标签的字体大小、位置和过渡效果。
  • .inputGroup :is(input:focus, input:valid)~label: 当输入框获得焦点或输入有效时,改变标签的位置、大小和背景颜色。
  • .inputGroup :is(input:focus, input:valid): 当输入框获得焦点或输入有效时,改变边框颜色。
  • input::placeholder: 设置占位符文本的颜色、字体大小、文本对齐和透明度。
相关推荐
gnip7 分钟前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫1 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel2 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼2 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手6 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法6 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku6 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode6 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu6 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu6 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript