gpt4 book ai didi

HTML 表单字段标签在没有说明的情况下在 MS-Edge 上设置为 100% 宽度?

转载 作者:太空宇宙 更新时间:2023-11-04 08:08:47 26 4
gpt4 key购买 nike

所以我一直在处理我正在处理的元素中的表单 - 并且发现在 Microsoft Edge 上,我的表单字段上标签的顶部边框消失了(我假设标签被设置为width: 100%; 并覆盖它),到目前为止我无法在任何其他浏览器中重新创建它弄清楚执行此操作的 CSS 在哪里。

下面是代码片段和 CodePen 的链接(因此您可以在 Edge 上全屏查看)。

图片:Form input comparison: Chrome Vs. Edge

代码笔:https://codepen.io/B-Lovegrove/pen/NadBVe

注意:为获得最佳效果,请在代码片段上使用全屏

html {
overflow-x: hidden;
max-width: 100%;
width: 100%;
height: 100%;
background: #363740 url("../media/bg.jpg") repeat scroll;
}

body {
margin: 0px;
padding: 0px;
min-height: 100%;
width: 100%;
}

a {
color: #4b8ddb;
text-decoration: none;
}

table.top_pattern {
width: 100%;
border-collapse: collapse;
}

table.top_pattern tbody tr td {
display: table-cell;
padding: 0;
width: 14%;
height: 5px;
}

table.top_pattern tbody tr td.tc_1 {
background: #7c8bc5;
}

table.top_pattern tbody tr td.tc_2 {
background: #799c0c;
}

table.top_pattern tbody tr td.tc_3 {
background: #2e4795;
}

.radio {
margin: 0.5rem;
}

.radio label {
font-size: 1.2em;
}

.radio input[type="radio"] {
position: absolute;
opacity: 0;
}

.radio input[type="radio"]+.radio-label:before {
position: relative;
display: inline-block;
margin-right: .8em;
width: 1em;
height: 1em;
border: 1px solid #415086;
border-radius: 100%;
background: white;
content: '';
vertical-align: top;
text-align: center;
cursor: pointer;
-webkit-transition: all 250ms ease;
transition: all 250ms ease;
}

.radio input[type="radio"]:checked+.radio-label:before {
background-color: #4b8ddb;
-webkit-box-shadow: inset 0 0 0 4px white;
box-shadow: inset 0 0 0 4px white;
font-size: 1.2em;
}

.radio input[type="radio"]:focus+.radio-label:before {
outline: none;
border-color: #4b8ddb;
}

.radio input[type="radio"]+.radio-label:empty:before {
margin-right: 0;
}
.Important {
padding: 10px;
border-bottom: solid 1px black;
background: rgba(139, 168, 46, 0.81);
text-align: center;
font-size: 1.2em;
font-family: "Lato", sans-serif;
}

h1.Important {
margin-top: 0em;
margin-bottom: 0;
border-top: solid 1px black;
background: rgba(209, 209, 209, 0.7);
font-weight: 500;
font-size: 2.1em;
font-family: "Roboto", sans-serif;
}

p,
ul {
color: white;
font-size: 1.3em;
font-family: "Tahoma", sans-serif;
line-height: 1.3em;
}

ul {
margin: 1em 0;
}

h2 {
color: white;
font-size: 1.4em;
font-family: "Roboto", sans-serif;
}

.Container {
padding-bottom: 2.8em;
}

.Container .Content {
margin: 1.7em 3em 0em 3em;
padding: 1.5em;
border: 1px solid #45464f;
background: #363740;
}

.StaticForm {
padding: 2em 1em 1em 1em;
min-height: 70px;
width: calc(100% - 32px);
border: 1px solid #45464f;
background: #2f3038;
font-family: "Century Gothic", sans-serif;
}

.StaticForm ul {
margin: 0;
padding: 0;
list-style: none;
}

.StaticForm .FormField {
display: block;
margin-bottom: 30px;
padding: 9px;
border: 1px solid #45464f;
}

.StaticForm .FormField:last-child {
margin-bottom: 0px;
border: none;
text-align: center;
}

.StaticForm .FormField>label:first-child {
display: block;
overflow: hidden;
margin-top: -28px;
padding: 5px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
background: #2f3038;
color: #4b8ddb;
font-size: 1.4em;
font-family: "Lato", sans-serif;
}

.StaticForm .FormField input::-webkit-input-placeholder {
border: none;
background: #2f3038;
color: #adadad;
font-weight: lighter;
font-family: "Roboto", sans-serif;
}

.StaticForm .FormField input:-ms-input-placeholder {
border: none;
background: #2f3038;
color: #adadad;
font-weight: lighter;
font-family: "Roboto", sans-serif;
}

.StaticForm .FormField input::placeholder {
border: none;
background: #2f3038;
color: #adadad;
font-weight: lighter;
font-family: "Roboto", sans-serif;
}

.StaticForm .FormField.Split {
display: inline-block;
float: right;
min-height: 41px;
width: calc(50% - 27px);
}

.StaticForm .FormField.Split button {
min-height: 41px;
background-color: #4b8ddb;
cursor: pointer;
}

.StaticForm .FormField.Split button:hover {
background-color: #3680d7;
}

.StaticForm .FormField.Split:nth-child(odd) {
float: left;
}

.StaticForm .FormField.Full {
display: inline-block;
float: left;
width: calc(100% - 18px);
}

.StaticForm .FormField.Red,
.StaticForm .FormField.Blue {
padding-top: 0;
padding-bottom: 0;
border: none;
}

.StaticForm .FormField.Red button,
.StaticForm .FormField.Blue button {
min-height: 61px;
border: none;
border-bottom: 3px solid #b22c2c;
border-radius: 3px;
background: #ce3939;
color: white;
}

.StaticForm .FormField.Red button:hover,
.StaticForm .FormField.Blue button:hover {
background: #c23030;
color: #f2f2f2;
cursor: pointer;
}

.StaticForm .FormField.Blue button {
border-bottom: 3px solid #374d94;
background: #415bae;
}

.StaticForm .FormField.Blue button:hover {
background: #3a519b;
}

.StaticForm input,
.StaticForm textarea,
.StaticForm button,
.StaticForm select {
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
width: 100%;
outline: none;
border: none;
background-color: #2f3038;
color: white;
font-size: 1.3em;
font-family: "Roboto", sans-serif;
resize: none;
}

.StaticForm .FormSubmit input,
.StaticForm .FormSubmit button,
.StaticForm .FormSubmit select {
padding: 10px;
border: none;
border-bottom: 3px solid #1b3669;
background: #415bae;
color: white;
}

.StaticForm .FormSubmit input:hover,
.StaticForm .FormSubmit button:hover,
.StaticForm .FormSubmit select:hover {
background: #3a519b;
color: #f2f2f2;
cursor: pointer;
}
<div class="Accounts Container">
<div class="Content">
<form id="TeacherForm" class="StaticForm" enctype="multipart/form-data" autocomplete="off" onkeypress="return event.keyCode != 13;">
<ul>
<li class="FormField Split">
<label for="teacher_code">Teacher code</label>
<input id="TeacherCode" type="text" name="teacher_code" maxlength="4" placeholder="Type teachers code" autofocus>
</li>
<li class="FormField Split">
<label for="name">Teacher name</label>
<input id="TeacherName" type="text" name="name" maxlength="255" placeholder="Type teachers name">
</li>
<li class="FormField Split">
<label for="email">Teacher email</label>
<input id="TeacherEmail" type="email" name="email" maxlength="255" placeholder="Type teachers email">
</li>
<li class="FormField Split">
<label for="password">Teacher password</label>
<input id="TeacherPassword" onfocus="RunOnce();" type="text" name="password" maxlength="255" placeholder="Type teachers password">
</li>
<li class="FormField Split">
<label for="department_id">Teacher department</label>
<input id="TeacherDepartment" type="text" name="department_id" maxlength="255" placeholder="Type teachers department">
</li>
<li class="FormField Split">
<label>Teacher subject</label>
<input id="TeacherSubject" type="text" name="subject_id" maxlength="255" placeholder="Type teachers subject">
</li>
<li class="FormField Full">
<label for="elevation">Teacher elevation</label>
<div class="radio">
<input id="teacher" class="TeacherElevation" name="elevation" type="radio" value=0 checked>
<label for="teacher" class="radio-label">Teacher</label>
</div>
<div class="radio">
<input id="tic" class="TeacherElevation" name="elevation" type="radio" value=1>
<label for="tic" class="radio-label">Teacher in charge</label>
</div>
<div class="radio">
<input id="hol" class="TeacherElevation" name="elevation" type="radio" value=2>
<label for="hol" class="radio-label">Head of learning</label>
</div>
<div class="radio">
<input id="sysadmin" class="TeacherElevation" name="elevation" type="radio" value=3>
<label for="sysadmin" class="radio-label">Systems admin</label>
</div>
</li>
<li class="FormSubmit">
<button id="TeacherSubmit">Register teacher</button>
</li>
</ul>
</form>
</div>
</div>

最佳答案

html {
overflow-x: hidden;
max-width: 100%;
width: 100%;
height: 100%;
background: #363740 url("../media/bg.jpg") repeat scroll;
}

body {
margin: 0px;
padding: 0px;
min-height: 100%;
width: 100%;
}

a {
color: #4b8ddb;
text-decoration: none;
}

table.top_pattern {
width: 100%;
border-collapse: collapse;
}

table.top_pattern tbody tr td {
display: table-cell;
padding: 0;
width: 14%;
height: 5px;
}

table.top_pattern tbody tr td.tc_1 {
background: #7c8bc5;
}

table.top_pattern tbody tr td.tc_2 {
background: #799c0c;
}

table.top_pattern tbody tr td.tc_3 {
background: #2e4795;
}

.radio {
margin: 0.5rem;
}

.radio label {
font-size: 1.2em;
}

.radio input[type="radio"] {
position: absolute;
opacity: 0;
}

.radio input[type="radio"] + .radio-label:before {
position: relative;
display: inline-block;
margin-right: .8em;
width: 1em;
height: 1em;
border: 1px solid #415086;
border-radius: 100%;
background: white;
content: '';
vertical-align: top;
text-align: center;
cursor: pointer;
-webkit-transition: all 250ms ease;
transition: all 250ms ease;
}

.radio input[type="radio"]:checked + .radio-label:before {
background-color: #4b8ddb;
-webkit-box-shadow: inset 0 0 0 4px white;
box-shadow: inset 0 0 0 4px white;
font-size: 1.2em;
}

.radio input[type="radio"]:focus + .radio-label:before {
outline: none;
border-color: #4b8ddb;
}

.radio input[type="radio"] + .radio-label:empty:before {
margin-right: 0;
}
.Important {
padding: 10px;
border-bottom: solid 1px black;
background: rgba(139, 168, 46, 0.81);
text-align: center;
font-size: 1.2em;
font-family: "Lato", sans-serif;
}

h1.Important {
margin-top: 0em;
margin-bottom: 0;
border-top: solid 1px black;
background: rgba(209, 209, 209, 0.7);
font-weight: 500;
font-size: 2.1em;
font-family: "Roboto", sans-serif;
}

p, ul {
color: white;
font-size: 1.3em;
font-family: "Tahoma", sans-serif;
line-height: 1.3em;
}

ul {
margin: 1em 0;
}

h2 {
color: white;
font-size: 1.4em;
font-family: "Roboto", sans-serif;
}

.Container {
padding-bottom: 2.8em;
}

.Container .Content {
margin: 1.7em 3em 0em 3em;
padding: 1.5em;
border: 1px solid #45464f;
background: #363740;
}

.StaticForm {
padding: 2em 1em 1em 1em;
min-height: 70px;
width: calc(100% - 32px);
border: 1px solid #45464f;
background: #2f3038;
font-family: "Century Gothic", sans-serif;
}

.StaticForm ul {
margin: 0;
padding: 0;
list-style: none;
}

.StaticForm .FormField {
display: block;
margin-bottom: 30px;
padding: 9px;
border: 1px solid #45464f;
}

.StaticForm .FormField:last-child {
margin-bottom: 0px;
border: none;
text-align: center;
}

.StaticForm .FormField > label:first-child {
display: inline-block;
overflow: hidden;
margin-top: -28px;
padding: 5px;
width: -webkit-fit-content;
width: -moz-fit-content;
width:-ms-fit-content;
width: fit-content;
background: #2f3038;
color: #4b8ddb;
font-size: 1.4em;
font-family: "Lato", sans-serif;
}

.StaticForm .FormField input::-webkit-input-placeholder {
border: none;
background: #2f3038;
color: #adadad;
font-weight: lighter;
font-family: "Roboto", sans-serif;
}

.StaticForm .FormField input:-ms-input-placeholder {
border: none;
background: #2f3038;
color: #adadad;
font-weight: lighter;
font-family: "Roboto", sans-serif;
}

.StaticForm .FormField input::placeholder {
border: none;
background: #2f3038;
color: #adadad;
font-weight: lighter;
font-family: "Roboto", sans-serif;
}

.StaticForm .FormField.Split {
display: inline-block;
float: right;
min-height: 41px;
width: calc(50% - 27px);
}

.StaticForm .FormField.Split button {
min-height: 41px;
background-color: #4b8ddb;
cursor: pointer;
}

.StaticForm .FormField.Split button:hover {
background-color: #3680d7;
}

.StaticForm .FormField.Split:nth-child(odd) {
float: left;
}

.StaticForm .FormField.Full {
display: inline-block;
float: left;
width: calc(100% - 18px);
}

.StaticForm .FormField.Red, .StaticForm .FormField.Blue {
padding-top: 0;
padding-bottom: 0;
border: none;
}

.StaticForm .FormField.Red button, .StaticForm .FormField.Blue button {
min-height: 61px;
border: none;
border-bottom: 3px solid #b22c2c;
border-radius: 3px;
background: #ce3939;
color: white;
}

.StaticForm .FormField.Red button:hover,
.StaticForm .FormField.Blue button:hover {
background: #c23030;
color: #f2f2f2;
cursor: pointer;
}

.StaticForm .FormField.Blue button {
border-bottom: 3px solid #374d94;
background: #415bae;
}

.StaticForm .FormField.Blue button:hover {
background: #3a519b;
}

.StaticForm input,
.StaticForm textarea,
.StaticForm button,
.StaticForm select {
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
width: 100%;
outline: none;
border: none;
background-color: #2f3038;
color: white;
font-size: 1.3em;
font-family: "Roboto", sans-serif;
resize: none;
}

.StaticForm .FormSubmit input,
.StaticForm .FormSubmit button,
.StaticForm .FormSubmit select {
padding: 10px;
border: none;
border-bottom: 3px solid #1b3669;
background: #415bae;
color: white;
}

.StaticForm .FormSubmit input:hover,
.StaticForm .FormSubmit button:hover,
.StaticForm .FormSubmit select:hover {
background: #3a519b;
color: #f2f2f2;
cursor: pointer;
}
<html lang=en>

<head>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Brandon Lovegrove" />
<meta charset="UTF-8" />
<title>Options Selection - demo</title>
<link rel="icon" type="image/x-icon" href="./media/favicon.ico" />
<link rel="stylesheet" href="./css/complete.css" />
</head>

<body>
<table class="top_pattern">
<tbody>
<tr>
<td class="tc_1"></td>
<td class="tc_2"></td>
<td class="tc_3"></td>
<td class="tc_1"></td>
<td class="tc_2"></td>
<td class="tc_3"></td>
<td class="tc_1"></td>
</tr>
</tbody>
</table>
<div class="Canvas">
<div class="Accounts Container">
<div class="Content">
<form id="TeacherForm" class="StaticForm" enctype="multipart/form-data" autocomplete="off" onkeypress="return event.keyCode != 13;">
<ul>
<li class="FormField Split">
<label for="teacher_code">Teacher code</label>
<input id="TeacherCode" type="text" name="teacher_code" maxlength="4" placeholder="Type teachers code" autofocus>
</li>
<li class="FormField Split">
<label for="name">Teacher name</label>
<input id="TeacherName" type="text" name="name" maxlength="255" placeholder="Type teachers name">
</li>
<li class="FormField Split">
<label for="email" >Teacher email</label>
<input id="TeacherEmail" type="email" name="email" maxlength="255" placeholder="Type teachers email">
</li>
<li class="FormField Split">
<label for="password">Teacher password</label>
<input id="TeacherPassword" type="password" name="password" maxlength="255" placeholder="Type teachers password">
</li>
<li class="FormField Split">
<label for="department_id">Teacher department</label>
<input id="TeacherDepartment" type="text" name="department_id" maxlength="255" placeholder="Type teachers department">
</li>
<li class="FormField Split">
<label>Teacher subject</label>
<input id="TeacherSubject" type="text" name="subject_id" maxlength="255" placeholder="Type teachers subject">
</li>
<li class="FormField Full">
<label for="elevation">Teacher elevation</label>
<div class="radio">
<input id="teacher" class="TeacherElevation" name="elevation" type="radio" value=0 checked>
<label for="teacher" class="radio-label">Teacher</label>
</div>
<div class="radio">
<input id="tic" class="TeacherElevation" name="elevation" type="radio" value=1>
<label for="tic" class="radio-label">Teacher in charge</label>
</div>
<div class="radio">
<input id="hol" class="TeacherElevation" name="elevation" type="radio" value=2>
<label for="hol" class="radio-label">Head of learning</label>
</div>
<div class="radio">
<input id="sysadmin" class="TeacherElevation" name="elevation" type="radio" value=3>
<label for="sysadmin" class="radio-label">Systems admin</label>
</div>
</li>
<li class="FormSubmit">
<button id="TeacherSubmit">Register teacher</button>
</li>
</ul>
</form>
</div>
</div>
</div>
</body>

</html>

关于HTML 表单字段标签在没有说明的情况下在 MS-Edge 上设置为 100% 宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46423556/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com