0
J'ai donc commencé à utiliser un formulaire dans un projet sur lequel je travaille - et j'ai découvert que sur Microsoft Edge, la bordure supérieure de l'étiquette sur mes champs de formulaire disparaît (je suppose que le libellé est width: 100%; et couvrir jusqu'à) et jusqu'à présent, je ne peux pas recréer cela dans un autre navigateur ou comprendre où le CSS qui fait cela est. Ci-dessous figure un extrait de code et un lien vers le CodePen (vous pouvez donc le voir en plein écran sur Edge).Les étiquettes de champ de formulaire HTML sont définies sur 100% de largeur sur MS-Edge sans instruction?
Image: Form input comparison: Chrome Vs. Edge
CodePen: https://codepen.io/B-Lovegrove/pen/NadBVe
Note: Pour de meilleurs résultats, utilisez-plein écran sur l'extrait de code
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>
Cela fonctionne! Je vous remercie. Bien qu'as-tu changé exactement? –