- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
所以我一直在处理我正在处理的元素中的表单 - 并且发现在 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/
这个问题已经有答案了: Is there any way to accept only numeric values in a JTextField? (20 个回答) It's possible i
我使用戴尔 XPS M1710。笔记本电脑的盖子、侧面扬声器和前置扬声器都有灯(3 组灯可以单独调节)和鼠标垫下方的灯。在 BIOS 中,我可以更改这些灯的颜色,至少是每个组。另外,我可以在鼠标垫下打
我知道我可以使用 在 iOS 5 中打开设置应用 [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"prefs://"
我有一个 Django 应用程序,我正在尝试为其设置文档。目录结构如下: - doc - project | - manage.py 我已经设置了路径以便 Sphinx 可以看到东西,但是当我尝试使用
我正在使用 768mb ram 运行 centos 5.5。我一直在日志中获取 server reached MaxClients setting, consider raising the MaxC
我在具有以下配置的服务器内运行了 Drupal 安装: StartServers 5 MinSpareServers 5 MaxSpareServers 15 MaxClien
是否可以使用 Microsoft.Web.Administration 包为给定的 location 配置 asp 设置? 我想以编程方式将以下部分添加到本地 IIS applicationHost.
我一直在阅读为 kube-proxy 提供参数的文档,但没有解释应该如何使用这些参数。我使用 az aks create 创建我的集群使用 azure-cli 程序,然后我获得凭据并使用 kubect
我想知道与在 PHP 中使用 setcookie() 函数相比,在客户端通过 JavaScript 设置一些 cookie 是否有任何明显的优势?我能想到的唯一原因是减少一些网络流量(第一次)。但不是
我有一个按钮可以将 body class 设置为 .blackout 我正在使用 js-cookie设置cookie,下面的代码与我的按钮相关联。 $('#boToggle').on('click'
我有一堆自定义的 HTML div。我将其中的 3 存储在具有 slide 类的 div 中。然后,我使用该幻灯片类调用 slick 函数并应用如下设置: $('.slide').slick({
我正在创建一个应该在 Windows 8(桌面)上运行的应用 我需要: 允许用户使用我的应用启动“文件历史记录”。我需要找到打开“文件历史记录”的命令行。 我需要能够显示“文件历史记录”的当前设置。
我刚买了一台新的 MacBook Pro,并尝试在系统中设置 RVM。我安装了 RVM 并将默认设置为 ➜ rvm list default Default Ruby (for new shells)
由于有关 Firestore 中时间戳行为即将发生变化的警告,我正在尝试更改我的应用的初始化代码。 The behavior for Date objects stored in Firestore
在 ICS 中,网络 -> 数据使用设置屏幕中现在有“限制后台数据”设置。 有没有办法以编程方式为我的应用程序设置“限制后台数据”? 或 有没有办法为我的应用程序调出具有选项的“数据使用”设置? 最佳
我正在尝试使用 NextJS 应用程序设置 Jest,目前在 jest.config.js : module.exports = { testPathIgnorePatterns: ["/.n
我最近升级到 FlashDevelop 4,这当然已经将我之前的所有设置恢复到原来的状态。 我遇到的问题是我无法在新设置窗口的哪个位置找到关闭它在方括号、大括号等之前插入的自动空格的选项。 即它会自动
有没有办法以编程方式访问 iPhone/iPod touch 设置? 谢谢。比兰奇 最佳答案 大多数用户设置可以通过读取存储在 /User/Library/Preferences/ 中的属性列表来访问
删除某些值时,我需要选择哪些设置来维护有序队列。我创建了带有自动增量和主键的 id 的表。当我第一次插入值时,没问题。就像 1,2,3,4,5... 当删除某些值时,顺序会发生变化,例如 1,5,3.
我正在尝试设置示例 Symfony2 项目,如此处所示 http://symfony.com/doc/current/quick_tour/the_big_picture.html 在访问 confi
我是一名优秀的程序员,十分优秀!