Hallo
Zunächst zu deinem Problem.
Ersetze
Code:
@media all {
...
#emaske label {
display: block;
width: 100%;
}
#emaske input {
display: block;
width: 100%;
}
}
durch
Code:
@media all {
...
#emaske label,
#emaske input,
#emaske select,
#emaske textarea {
display: block;
width: 100%;
}
}
Weiterhin solltest du auf inline-CSS verzichten.
Also im HTML
HTML-Code:
<div>
<label for="zehn">xxxxxx</label>
<textarea name="zehn" id="zehn" style="height:6rem">zehn</textarea>
</div>
durch
HTML-Code:
<div>
<label for="zehn">xxxxxx</label>
<textarea name="zehn" id="zehn">zehn</textarea>
</div>
ersetzen und im CSS
Code:
@media all {
#emaske textarea {
height: 6rem;
}
}
hinzufügen. Dabei kannst du die Angaben natürlich in einen bereits bestehenden @media all-Block hinzufügen ohne einen neuen zu erstellen.
Du kannst deine Webseite natürlich erstellen wie du willst. Deshalb sind die Antworten auch für Drittleser gedacht, die sich mit HTML / CSS nicht so gut auskennen. Deshalb noch dieser Hinweis:
Das
HTML-Code:
<div>
<label for="sechs">xxxxxxxxx</label>
<input id="sechs" type="checkbox" style="position:absolute;left:0;">
<label for="sechs"></label>
</div>
geht für mich auch nicht. Es kann durchaus manchmal sinnvoll sein, HTML-Elemente doppelt einzufügen und wechselseitig anzuzeigen. So einen Fall kann ich aber hier nicht erkennen.
Deshalb finde ich sinnvoller
HTML-Code:
<div class="cbox">
<input id="sechs" name="sechs" type="checkbox">
<label for="sechs">xxxxxxxxx</label>
</div>
zu verwenden und
Code:
input[type=checkbox] {
visibility: hidden;
}
input[type=checkbox] + label::after {
content: "";
width: 17px;
height: 17px;
float: left;
border: 1px solid #d4d4d4;
display: inline-block;
cursor: pointer;
font-family: FontAwesome;
-moz-box-shadow: 3px 3px 3px rgba(29, 29, 28, .1) inset;
-webkit-box-shadow: 3px 3px 3px rgba(29, 29, 28, .1) inset;
-khtml-box-shadow: 3px 3px 3px rgba(29, 29, 28, .1) inset;
box-shadow: 3px 3px 3px rgba(29, 29, 28, .1) inset;
-webkit-transform: scale(1, 1);
background: #fff;
}
input[type=checkbox]:checked + label::after {
content: "";
font-family: FontAwesome;
font-size: 12px;
color: #444444;
text-align: center;
line-height: 17px;
-webkit-box-shadow: inset 3px 3px 3px 0px rgba(29, 29, 28, 0.1);
-moz-box-shadow: inset 3px 3px 3px 0px rgba(29, 29, 28, 0.1);
box-shadow: inset 3px 3px 3px 0px rgba(29, 29, 28, 0.1);
}
zunächst komplett wegzulassen. Solche Verschönerungen sollten erst eingefügt werden, wenn die Seite mit den Standardangaben funktioniert.
In diesem Fall verwende ich die Klasse (hier cbox) da Checkboxen und Radiobuttons nur schwierig anzupassen sind und sie damit einfacher mit CSS angesprochen werden können.
Das CSS dazu lautet dann
Code:
@media all {
#emaske .cbox {
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
#emaske .cbox input {
margin-left: 0;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 1rem;
order: 2;
}
#emaske .cbox label {
order: 1;
}
}
So wird das label im Quelltext nach dem input aufgeführt, in den Browsern aber davor angezeigt. Das die CSS-Angaben in einen bereits bestehenden @media all-Block eingefügt werden können sollte inzwischen klar sein.
Wenn das soweit funktioniert kann eine Lösung gesucht werden um den Checkbox-Kasten durch eine andere Darstellung zu ersetzen. Die Voraussetzungen für den Checkbox-Hack (input im Quelltext vor label) sind gegeben und bleiben es auch, wenn die Reihenfolge im Browser mittels Flexbox anders herum angezeigt wird.
Gruss
MrMurphy