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

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

转载作者：行者123 更新时间：2023-11-28 15:00:49

我正在开发一个带有登录表单的简单登录页面。当我添加 < !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/

文章推荐： Swift 在 View 中滑动时启用 TableView 重新加载

javascript - 如果输入 a 或 b 正确/正确，我如何执行操作？
这个问题已经有答案了: How to do case insensitive string comparison? (23 个回答) 已关闭 3 年前。用户在我的输入栏中写入“足球”，然后执行第 6
javascript - 字符 id= + 是 + 正确= + 正确不正确...我怎样才能使它成为 javascript 中的字符串
啊，不习惯 javascript 中的字符串。 character_id= + id + correct= + correctOrIncorrect 这就是我需要制作成字符串的内容。如果您无法猜测字符
javascript - jQuery计算价格不起作用(正确)
$(function() { var base_price = 0; CalculatePrice(); $(".math1").on('change', function(e) { Calc
kubernetes - 将Spinnaker部署到Spinnaker将管理的同一kubernetes集群是否安全/正确？
我找不到任何文章回答问题:将Spinnaker部署到Spinnaker将管理的同一Kubernetes集群是否安全/正确？我主要是指生产，HA部署。最佳答案我认为Spinnaker和Kuberne
c++ - 正确/快速的方法来更改命令行Qt5源内部版本的配置
我正在使用MSVC在Windows上从源代码(官方源代码发布，而不是从仓库中)构建Qt5(Qt 5.15.0)。我正在设置环境。变量，依赖项等，然后运行具有1600万个选项的configure，最后
java - 计数时数组越界[正确]
我需要打印一个包含重复单词的数组。我的数组已经可以工作，但我不知道如何正确计算单词数。我已经知道，当我的索引计数器 (i) 为 49 时，并且当 (i) 想要计数到 50 时，我会收到错误，但我不知道
javascript - 正确/错误取决于屏幕尺寸动态？
我正在遵循一个指南，该指南允许 Google map 屏幕根据屏幕尺寸禁用滚动。我唯一挣扎的部分是编写一个代码，当我手动调整屏幕大小时动态更改 True/False 值。这是我按照说明操作的网站，但
java - 未调用子类中的方法(正确)
我有一个类“FileButton”。它的目的是将文件链接到 JButton，FileButton 继承自 JButton。子类继承自此以使用链接到按钮的文件做有用的事情。 JingleCardButt
php - 如何仅显示来自好友列表的帖子。 (正确)
我的 friend 数组只返回一个数字而不是所有数字。 ($myfriends = 3) 应该是…… ($myfriends = 3 5 7 8 9 12). 如果我让它进入 while 循环……整个
html - 在这种情况下使用整数作为类名是否可以接受/正确
这个问题在这里已经有了答案: Is there a workaround to make CSS classes with names that start with numbers valid?
javascript - 在窗口更改时自动调整元素大小(正确)
我正在制作一个 JavaScript 函数，当调整窗口大小时，它会自动将 div 的大小调整为与窗口相同的宽度/高度。该功能非常基本，但我注意到在调整窗口大小时出现明显的“绘制”滞后。在 JS fi
javascript - 删除导航栏的类 - 正确
此问题的基本视觉效果可在 http://sevenx.de/demo/bootstrap-carousel/inc.carousel/tabbed-slider.html 获得。 - 如果你想看一看。
c - 从将其内存分配给同一函数的函数返回字符串是否安全/正确？
我明白，如果我想从函数返回一个字符串文字或一个数组，我应该将其声明为静态的，这样当被调用的函数被返回时，内容就不会“消亡”。但我的问题是，当我在函数内部使用 malloc 分配内存时会怎样？在下面
mysql - 正确/错误值的适当数据字段类型？
在 mySQL 数据库中存储 true/false/1/0 值最合适(读取数据消耗最少)的数据字段是什么？我以前使用过一个字符长的 tinyint，但我不确定它是否是最佳解决方案？谢谢! 最佳答案
c++ - 正确，有效地读取文件
我想一次读取并处理CSV文件第一行中的条目(例如打印)。我假设使用Unix风格的\n换行符，没有条目长度超过255个字符，并且(现在)在EOF之前有一个换行符。这意味着它是fgets()后跟strto
c++ - “正确”无符号整数比较
所以，我们都知道 -1 > 2u == true 的 C/C++ 有符号/无符号比较规则，并且我有一种情况，我想有效地实现“正确”比较。我的问题是，考虑到人们熟悉的尽可能多的架构，哪种方法更有效。显
Java异常处理：如何写出“正确”但被编译器认为有语法错误的程序
**摘要：**文章的标题看似自相矛盾。本文分享自华为云社区《Java异常处理：如何写出“正确”但被编译器认为有语法错误的程序》，作者： Jerry Wang 。文章的标题看似自相矛盾，然而我在“正
r - 进行按行替换的“正确”方法
我有一个数据框，看起来像: dataDemo % mutate_each(funs(ifelse(. == '.', REF, as.character(.))), -POS) # POS REF
text - VBScript 正确/重新格式化带分隔符的文本文件？
有人可以帮助我使用 VBScript 重新格式化/正确格式化带分隔符的文本文件吗？我有一个文本文件 ^分界如下: AGREE^NAME^ADD1^ADD2^ADD3^ADD4^PCODE^BAL^A
java - 语言认证以及诸如适当、正确、合法等术语的使用
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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