css输入框加小图标

1、效果图

　　　　　　　　　　　　　　　　　　

 2、小图标资源

https://www.iconfont.cn/

 

3、代码

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>${fns:getConfig('productName')}</title>
    <link rel="stylesheet" href="${ctxStatic}/layui-v2.4.5/layui/css/layui.css">
    <link rel="stylesheet" href="${ctxStatic}/login/login/login.css">
    <link rel="shortcat icon" href="${ctxBase}/favicon.ico">
    <script src="${ctxStatic}/jquery/jquery-1.9.1.min.js"></script>
    <script src="${ctxStatic}/layui-v2.4.5/layui/layui.js"></script>
    <script src="${ctxStatic}/layui-v2.4.5/layui/lay/modules/form.js"></script>
    <script type="text/javascript" src="${ctxStatic}/jsencrypt.min.js"></script>
    <script language="javascript">
        var publicKey = "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCGCZQCtlvTf4GmW+Uy2hCiXeGRZW0fSc37srvSzLTp5Z9s/v572iFHVfCfftZWR8GaXqoMv0rOQfofXfCl58zah+cEtEf2QSluJFTTNbQe5k9J9Sv9Tp8hR9tJhRADrJndeepFewp2oWd/t/HeBonaPux4q2ySQiUejA+k+uBUlQIDAQAB"
        
        function submitEncrypt() {
            var encrypt = new JSEncrypt();
            encrypt.setPublicKey(publicKey);//设置公钥
            var encrypted = encrypt.encrypt($("#username").val());
            var encrypted1 = encrypt.encrypt($("#password").val());
            $("#username").val(encrypted);
            $("#password").val(encrypted1);
            $("#loginForm").submit();
        }
    </script>
    <style type="text/css">
        .bd{
            border: 1px solid red;
        }
        .login-content{
            position: relative;
            height: 100%;
            width: 100%;
            display: flex;
            flex-wrap: nowrap;
            justify-content:space-around !important;
            align-items:center;
        }
        .login-left{
            width: 80%;
            height: 80%;
            text-align: center;
        }
        .login-left .login-form {
            width: 100%;
            height: 136px;
            margin:  0 auto;
        }
        .login-left p{
            width: 100%;
            height: 45px;
            font-size: 26px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #333333;
            text-align: center;
            margin: 0 auto;
        }
        .login-form{
            margin-top: 30px;
        }
        .layui-form-item-3{
            width: 90%;
            margin: 0 auto;
        }
        .layui-form-item-3 input{
            padding-left: 50px;
        }
        .layui-form-item input{
            border: 1px solid #EEEEEE;
            border-radius: 28px;
            width: 398px;
            height: 56px;
            margin: 0 auto;
        }
        .bg1{
            padding-left: 60px;
        }
        .bg2{
            padding-left: 60px;
            padding-right: 60px;
        }

        .login_btn{
            font-size: 18px;
            font-weight: bold;
            margin-top: 60px ;
            width: 398px;
            height: 56px;
            border-radius: 28px;
        }
        .login-to-regist{
            width: 50%;
            margin: 0 auto;
            margin-top: 200px;
            color: #00A807;
            font-size: 14px;
            text-align: center;
        }
        .ltr{
            cursor: pointer;
            display: inline-block;
        }
        .ltr:hover{
            transform: scale(1.2);
        }
        .img_r{
            position: absolute;
            right: 17%;
            top: 40%;
            z-index: 1;
            cursor: pointer;
        }
        .user_img{
            position: absolute;
            left: 17%;
            top: 25%;
            z-index: 1;
        }
        .password_img{
            position: absolute;
            left: 17%;
            top: 40%;
            z-index: 1;
        }
        .yzm_img{
            width: 136px;
            height: 54px;
        }
    </style>
</head>
<body>
<div class="login-content">
    <div class="login-left ">
        <p>账户登陆</p>
        <form class="layui-form login-form" id="loginForm" action="${ctx}/login" method="post">
            <label class="wrap-label" style="color:red;position: absolute; top:18%;left: 36%">${message}</label>
            <input type="hidden" name="version" value="">
            <div class="layui-form-item" style="margin: 15px auto">
                <input type="password" hidden autocomplete="new-password">
                <img src="${ctxStatic}/images/login/user.png" class="user_img">
                <input type="text" name="username" id="username"    lay-verify="required" placeholder="请输入手机号码" autocomplete="off" value=""
                       class="layui-input bg1">
            </div>
            <div class="layui-form-item">
                <img src="${ctxStatic}/images/login/password2.png" class="password_img">
                <input type="password" name="password" id="password" lay-verify="required" placeholder="请输入登录密码" autocomplete="off"
                       value="" class="layui-input bg2 ">
                <a class="img_r" onclick="showpassword()"><img src="${ctxStatic}/images/login/nopassword2.png" id="img"></a>
            </div>
            <div style="clear: both"></div>
            <c:if test="${isValidateCodeLogin}">
                <div class="layui-form-item form_code">
                    <input class="layui-input" name="validateCode" id="validateCode" placeholder="验证码" lay-verify="required" type="text"
                           autocomplete="off" style="padding-left: 60px ; padding-right: 200px" >
                    <div class="code">
                        <img src="${pageContext.request.contextPath}/servlet/validateCodeServlet" id="validateCodePic" class="yzm_img">
                    </div>
                </div>
            </c:if>
            <input lay-submit="" lay-filter="login" class="layui-btn login_btn" style="background-color: #00A807;" type="button" onclick="submitEncrypt()" value="登录">
        </form> 
        <div class="login-to-regist" >
            <span style="color: black"> 还没账号？</span>
            <span class="ltr" onclick="javaScript:window.open('${ctxPro}/registerPage', '_parent')">立即注册</span>
        </div>
    </div>
</div>
</body>
</html>
<script>
    var a = document.getElementById("password");
    var b = document.getElementById("img");
    function showpassword(){
        if (a.type == "password"){
            a.type = "text";
            b.src = "${ctxStatic}/images/login/topassword2.png";
        }else{
            a.type = "password";
            b.src = "${ctxStatic}/images/login/nopassword2.png";
        }
    }
/*
    var wh = $(window).height(),
        hh = $("#header").height(),
        fh = $("#footer").height(),
        ch = wh - hh - fh;
    $("#content").height(ch);

    var form = layui.form,
        common = layui.common,
        carousel = layui.carousel;

    /!**背景图片轮播*!/
    carousel.render({
        elem: '#login_carousel',
        width: '100%',
        height: '100%',
        interval: 3000,
        arrow: 'none',
        anim: 'fade',
        indicator: 'none'
    });*/

    /**点击验证码重新生成*/
    $('.code img').on('click', function () {
        $('#validateCodePic').attr('src', '${pageContext.request.contextPath}/servlet/validateCodeServlet?nocache=' + new Date().getTime());
    });

</script>

 

posted @ 2022-03-08 16:44  aaa111js  阅读(244)  评论(0)    收藏  举报