body {
background-color: #29aaa3;
}
/* Das Kontaktformular */
.Form_1 {
width: 420px;
text-align: center;
}
.Rahmen {
border-color: blue;
}
form {
background-color: #eee;
width: 400px; /* Breite des Formulars. */
padding: 20px;
border: 3px solid blue;
}
label { /* Beschriftung auf eigener Zeile. */
display: block;
cursor: pointer; /* Mauszeiger wird zur Hand. */
background-color: gold;
font-family: Arial Narrow;
font-size: 1.7em;
}
input#absender,
textarea {
width: 150px;
border: 3px solid #8c8c8c;
margin-bottom: 1em;
}
textarea {
height: 10em;
width: 10em;
background-color: gold;
font-family: Arial Narrow;
font-size: 1.7em;
}
input:focus,
textarea:focus
{
background-color: #FF9900;
}
h2 {
text-align: center;
font-family: Arial Narrow;
}
.select {
position: relative;
display: inline-block;
margin-bottom: 15px;
width: 100%;
} .select select {
font-family: 'Arial Narrow';
display: inline-block;
width: 100%;
cursor: pointer;
padding: 10px 15px;
outline: 0;
border: 0px solid #000000;
border-radius: 7px;
background: #FF9900;
color: #001afb;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.select select::-ms-expand {
display: none;
}
.select select:hover,
.select select:focus {
color: blue;
background: #FF9900;
}
.select select:disabled {
opacity: 0.5;
pointer-events: none;
}
.select_arrow {
position: absolute;
top: 16px;
right: 15px;
pointer-events: none;
border-style: solid;
border-width: 8px 5px 0px 5px;
border-color: #7b7b7b transparent transparent transparent;
}
.select select:hover ~ .select_arrow,
.select select:focus ~ .select_arrow {
border-top-color: #000000;
}
.select select:disabled ~ .select_arrow {
border-top-color: #cccccc;
}
Das steht in meiner css Datei für das Kontaktformular.
Ist das alles gut?
Es hat den Namen: Style_Kontaktformular.css