<!DOCTYPE html>
<html>
<head>
<meta http
-equiv="pragma" content="no
-cache">
<meta http
-equiv="cache
-control" content="no
-cache">
<meta http
-equiv="expires" content="0">
<meta http
-equiv="X
-UA
-Compatible" content="chrome=1">
<meta http
-equiv="Content
-Type" content="text/html; charset=UTF
-8">
<meta name="watch" content="default">
<meta name="theme" content="custom">
<script type="text/javascript" src="script/jquery.min.js"></script>
<script type="text/javascript" src="themes/layui/lay/dest/layui.all.js"></script>
<script type="text/javascript" src="script/jsencrypt.min.js"></script>
<!
-- <script type="text/javascript" src="script/index.js"></script>
-->
<script type="text/javascript" src="script/indexs0.js"></script>
<meta charset="UTF
-8">
<title>登录</title>
<style>
body {
overflow
: hidden;
/*background
-image
: url
(image/dbj.jpg
);*/
background
-image
: url
(image/bg.jpg
);
background
-position
-y
: -60px;
background
-size
: 100% 100%;
/*background
-size
: cover;*/
}
.header {
margin
-top
: 40px;
padding
-bottom
: 50px;
margin
-left
: 40px;
}
.login {
margin
: 0 auto;
display
: inline;
}
.conti {
width
: 100%;
height
: 100%;
display
: flex;
flex
-direction
: row;
justify
-content
: flex
-start;
align
-items
: center;
}
.login_bg {
position
: absolute;
width
: 624px;
text
-align
:center;
padding
:80px 0;
/*top
:50%;*/
/*left
:35%;*/
right
: 218px;
/*margin
: -15% 0 0
-25%;*/
box
-shadow
: 2px 2px 2px 2px 0.3;
border
-radius
: 4px;
background
:#fff;
overflow
: hidden;
}
.logo
-box {
width
: 200px;
height
: 52px;
overflow
: hidden;
margin
: 0 auto;
}
.logo
-box img {
width
: 100%;
height
: 100%;
box
-sizing
: border
-box;
display
: block;
}
.zhubiaoti {
width
: 100%;
height
: 54px;
margin
-bottom
:50px;
line
-height
: 54px;
font
-family
: "Source Han Sans CN";
font
-size
: 36px;
font
-weight
: 500;
font
-style
: normal;
/*letter
-spacing
: 100;*/
color
: #333;
}
.biaoti
-img {
width
: 216px;
height
: 54px;
}
.group_user {
font
: 18px 微软雅黑;
}
.group_user h1 {
font
: 20px 微软雅黑;
color
: #ffffff;
border
-bottom
: 1px rgba
(255, 255, 255, 0.25
) solid;
padding
: 5px;
margin
-bottom
: 28px;
}
.group_
input {
width
: 100%;
margin
: 0 auto;
}
.group_user {
width
: 100%;
}
.name {
color
: #ffffff;
font
-size
: 16px;
margin
: 5px 0;
width
: 100%;
}
.group_user
input {
width
: 80%;
height
: 40px;
padding
: 0 20px;
}
.name .name_pwd {
margin
-top
: 5px;
margin
-left
: -10px;
}
.btn {
margin
-left
: 50px;
padding
: 6px;
}
.btn1 {
width
: 469px;
height
: 68px;
background
: #2E47C9;
margin
: 56px 0 0 77px;
text
-align
: center;
line
-height
: 70px;
border
-radius
: 10px;
cursor
: pointer;
}
input {
outline
: none;
}
.btn11 {
width
: 469px;
height
: 68px;
background
-color
: #fff;
margin
-left
: 77px;
margin
-bottom
: 32px;
border
-radius
: 10px;
border
: none;
line
-height
: 68px;
border
: 1px solid #2E47C9;
/*font
-family
: "微软雅黑";*/
text
-indent
: 20px;
}
.toptt1 {
width
: 100%;
line
-height
: 100px;
padding
-top
: 30px;
}
.div1 {
width
: 130px;
height
: 70px;
line
-height
: 100px;
display
: inline;
}
.div2 {
width
: 300px;
height
: 70px;
line
-height
: 100px;
display
: inline;
}
.name_user {
background
-size
: 5%;
border
: none;
}
.name_pwd {
background
-size
: 5%;
border
: none;
margin
: 0 auto;
}
.leftbar {
float
: left;
margin
-top
: 85px;
width
: 60%;
}
/*.leftbar img{
margin
-left
:82px; width
:90%;height
:425px;margin
-top
:-55px;}
.footer img{
}*/
.footer {
text
-align
: center;
height
: 100px;
width
: 100%;
background
: url
(image/bg3.png
) no
-repeat;
background
-size
: 100% 100%;
position
: fixed;
bottom
: 0;
}
input:-webkit-autofill,
textarea
:-webkit-autofill,
select
:-webkit-autofill {
background
-color
: #fff;
}
.btnlogin {
color
: #fff;
/*border
-radius
:10px;*/
font
-size
: 26px;
cursor
: pointer;
}
input:-webkit-autofill,
textarea
:-webkit-autofill,
select
:-webkit-autofill {
-webkit-box
-shadow
: 0 0 0 1000px white inset;
}
</style>
<script type="text/javascript">
$
(document
).ready
(function
() {
$
('body'
).css
('height', $
(window
).height
());
$
('body'
).css
('width', $
(window
).width
());
$
('.conti'
).css
('height', $
(window
).height
());
$
('.conti'
).css
('width', $
(window
).width
());
}
)
$
(window
).resize
(function
() {
$
('body'
).css
('height', $
(window
).height
());
$
('body'
).css
('width', $
(window
).width
());
$
('.conti'
).css
('height', $
(window
).height
());
$
('.conti'
).css
('width', $
(window
).width
());
}
)
$
(function
() {
$
('#dcz
-input-1'
).css
('border
-color', '#2E47C9'
)
}
);
function on
InputFocus
(id
) {
$
('#' + id
).focus
()
if
(id == 'user_name'
) {
$
('#dcz
-input-1'
).css
('border
-color', '#2E47C9'
)
} else if
(id == 'user_password'
) {
$
('#dcz
-input-2'
).css
('border
-color', '#2E47C9'
)
} else if
(id == 'user_yzm'
) {
$
('#dcz
-input-3'
).css
('border
-color', '#2E47C9'
)
}
}
function on
InputBlur
(id
) {
$
('#' + id
).css
('border
-color', '#CDCDCD'
)
}
</script>
</head>
<body>
<!
-- <div class="header">
-->
<!
-- <img src="image/logo.png" alt="" />
-->
<!
-- </div>
-->
<div class="bg_img">
<!
--header
-->
<!
--用户登录
-->
<div class="conti">
<div class="login_bg">
<div class="zhubiaoti">
中交智运运输监管平台
</div>
<form class="group_
input">
<div class="group_user">
<div class="btn11" id="dcz
-input-1" onclick="on
InputFocus
('user_name'
)">
<
input id="user_name" autocomplete="off" class="name_user" type="text" name="code"
onblur="on
InputBlur
('dcz
-input-1'
)" aria
-label="用户名" placeholder="请输入用户名">
</div>
<div class="btn11" id="dcz
-input-2" onclick="on
InputFocus
('user_password'
)">
<
input id="user_password" class="name_pwd" type="password" name="passwd" aria
-label="密码"
onblur="on
InputBlur
('dcz
-input-2'
)" placeholder="请输入密码" autocomplete="off">
</div>
<div class="btn1" id="logonbtn">
<p class="btnlogin">登 录</p>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>这个页面做适配
解决Chrome输入框的黄色背景与粗边框问题
本文介绍如何通过设置input元素的autocomplete属性为'off'来关闭自动完成功能，并添加outline:none样式以去除Chrome浏览器中输入框的黄色背景与粗边框，提升用户体验。
扫一扫
1564
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
