Я работаю над простой страницей входа с формой входа. Когда я добавил < !DOCTYPE HTML>, поле ввода набросало дальше, чем контейнер, когда установлено значение ширины 100%. Я искал решение и заметил, что задаваемые вопросы касаются проблемы с доктайпом, касающейся конкретной проблемы.
Ниже приведены мои коды;
.loginbox {
width: 320px;
height: 440px;
background: #000;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.loginbox {
width: 450px;
height: 480px;
padding: 90px 30px;
}
.inputContainer input {
margin-bottom: 30px;
}
}
.loginavatar {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: -50px;
left: calc(50% - 50px);
}
.loginbox h1 {
font-size: 22px;
text-align: center;
margin: 0;
padding: 0 0 20px;
}
.inputContainer input {
margin-bottom: 20px;
}
input:-webkit-autofill {
-webkit-text-fill-color: #ffffff !important;
transition: background-color 5000s ease-in-out 0s;
-webkit-transition: background-color 5000s ease-in-out 0s;
}
.inputContainer input[type="text"],
input[type="password"] {
width: 100%;
height: 42px;
background: transparent;
color: #fff;
font-size: 14px;
font-family: inherit;
font-weight: 400;
border: none;
border-bottom: 1px solid #333;
outline: none;
padding-left: 25px;
}
.logico {
position: absolute;
top: 20%;
}
.usernithicon,
.passnithicon {
position: relative;
}
.inputContainer input[type="text"]:hover,
input[type="password"]:hover,
input[type="text"]:focus,
input[type="password"]:focus {
border-bottom: 1px solid #bc2333;
}
.inputContainer .inputBox label {
position: absolute;
top: 0;
left: 10%;
padding: 15px 0 0 0;
font-size: 14px;
pointer-events: none;
transition: .5s;
}
.inputContainer .inputBox input:focus~label,
.inputContainer .inputBox input:valid~label {
top: -18px;
left: 10%;
font-size: 12px;
color: #bc2333;
}
input[type=checkbox]+label {
display: block;
margin: 3px 3px 20px;
cursor: pointer;
padding: 0;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]+label:before {
content: "\2714";
border: 1px solid #fff;
border-radius: 0.2em;
display: inline-block;
width: 1em;
height: 1em;
padding-left: 0.2em;
padding-bottom: 0.3em;
margin-right: 0.2em;
vertical-align: bottom;
color: transparent;
transition: .2s;
}
input[type=checkbox]+label:active:before {
transform: scale(0);
}
input[type=checkbox]:checked+label:before {
background-color: #bc2333;
border-color: #bc2333;
color: #fff;
}
input[type=checkbox]:checked:disabled+label:before {
transform: scale(1);
background-color: #bc2333;
border-color: #bc2333;
opacity: 0.5;
}
input[type=checkbox]:disabled+label:before {
transform: scale(1);
border-color: #fff;
opacity: 0.2;
}
.inputContainer input[type="submit"] {
width: 100%;
height: 48px;
background: #bc2333;
color: #fff;
font-size: 16px;
font-weight: 500;
font-family: inherit;
border: 0;
outline: none;
}
.inputContainer input[type="submit"]:hover {
cursor: pointer;
background: #7a091f;
transition: .3s ease;
}
.inputContainer a {
color: #fff;
display: block;
text-decoration: none;
text-align: center;
}
.inputContainer a:hover {
color: #f4f4f4;
transition: .2s ease;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="application-name" content="">
<title>Member Login</title>
<link rel="stylesheet" href="fonts/FontAwesome/css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/login.css">
</head>
<body>
<div class="loginbox">
<img class="loginavatar" src="assets/images/user.png" draggable="false" />
<h1>Login Form</h1>
<div class="inputContainer">
<form method="POST" action="">
<!--<p>Username</p>-->
<div class="usernithicon inputBox">
<i class="fa fa-user logico"></i>
<input type="text" id="usern" name="username" required><label for="usern">Username</label></div>
<!--<p>Password</p>-->
<div class="passnithicon inputBox">
<i class="fa fa-lock logico"></i>
<input type="password" id="pswrd" name="password" required><label for="pswrd">Password</label></div>
<input type="checkbox" id="remberme" name="remember"><label for="remberme">Remeber Me</label>
<input type="submit" name="" value="Login">
<a href="#">Forgot password?</a><br>
<a href="#">Create An Account</a>
</form>
</div>
</div>
</body>
</html>
Когда это рендерится в браузере, поле ввода имени пользователя и пароля будет растянуто, и я смог использовать width:90%;, который отлично работает, но я бы хотел установить его на width:100%; (который прекрасно работает без добавления типа документа). тег), но когда код doctype добавлен, он растягивается.
Дополнительная проблема: фоновое изображение, которое я добавил к телу, не покрывает весь экран, оно разбивается посередине и повторяется. Я попытался добавить background-repeat:none;, но не сработало. но если я удаляю тег doctype, фон заполняет страницу, как и ожидалось.
Как мне решить эту проблему?