验证码输入前有横线，输入数字或字母后消失的小demo

最新推荐文章于 2023-10-13 16:03:29 发布

荷兰豆叶子上的水熊

最新推荐文章于 2023-10-13 16:03:29 发布

阅读量2.3k

点赞数

分类专栏： css html 文章标签： css html

本文链接：https://blog.csdn.net/u010200033/article/details/80381405

版权

这是一个关于验证码输入框的交互设计小示例。在输入框中预设了一条横线，当用户开始输入数字或字母时，横线会随之消失，提供更友好的用户体验。该效果主要通过CSS和HTML实现。

摘要由CSDN通过智能技术生成

示意图

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .box{
                width: 600px;height: 50px;border:2px solid;margin:100px auto;
                list-style: none;padding: 0;
                display: flex;
            }
            .box>li{
                flex:1;position: relative;
                text-align: center;line-height: 50px;
            }
            .box>li>span{
                display:block;
                width: 50%;height: 3px;background-color: #000;
                position:absolute;
                top:70%;left: 50%;
                margin-left: -25px;
            }


        </style>
    </head>
    <body>
        <ul class="box