php - 添加 doctype html 后，输入字段 CSS 代码无法正确呈现

标签 php css html

我正在开发一个带有登录表单的简单登录页面。当我添加 < !DOCTYPE HTML> ，当设置为 100% 宽度时，输入字段比容器绘制得更远。我已经搜索了解决方案并注意到所问的问题考虑 doctype messing up css 是关于特定问题的。

下面是我的代码；

.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 标签的情况下工作得很好)但是当添加 doctype 代码时，它会被拉伸(stretch)。

其他问题:我添加到主体的背景图像不会覆盖整个屏幕，它在中间中断并重复。我尝试添加 background-repeat:none;但没有用。但是如果我删除 doctype 标签，背景会按预期填满页面。

我该如何解决？

最佳答案

根据您的需要，我在您的输入包装器中添加了display: inline-flex;

试试这个

.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: 20px;
}

.logico {
  position: absolute;
  top: 20%;
}

.usernithicon,
.passnithicon {
      position: relative;
    display: inline-flex;
    align-items: baseline;
    width: 100%;
}

.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: -22px;
  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;
}

对于背景试试这个

body, html{
   height: 100%; 
   background-image: url('your_image_path')
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

关于php - 添加 doctype html 后，输入字段 CSS 代码无法正确呈现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50200870/

上一篇：html - 为什么我的 index.html 没有将我的 style.css 放在我的 css 文件夹中？

下一篇：html - slider 动画

相关文章：

css - 在 React-Native 中将图像包含到特定 block 中

html - flexbox 可以检测到 flex 元素何时换行吗？

html - 悬停时隐藏/显示背景文本

html - 日期选择器出现在模态后面

php - 类(class)规模会太大吗？

PHP Pear 安装程序停留在 21%

php - 如何将php代码放入jquery函数中

php - mysql_fetch_array()/mysql_fetch_assoc()/mysql_fetch_row()/mysql_num_rows 等...期望参数 1 是资源

python - 在python中创建文件夹

php - 溢出-x/y 在 IE 中不起作用

©2024 IT工具网  联系我们