nicht angemeldet
Hallo,
ich habe ein Problem und zwar, wenn ich meine Website (HTML Formular) neulade, entstehen an der "input-border" für einen kurzen Moment große schwarze Ränder, die ich nicht haben möchte. Wie entferne ich diese wieder?
HTML:
<!DOCTYPE html>
<html lang="de-DE">
<head>
<title>CSS Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, inital-scale=1.0, user-scalable=no">
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<div class="container">
<div class="form">
<form method="post">
<label for="fname">Vorname</label>
<input type="text" id="vname" name="vname" placeholder="Dein Vorname">
<label for="lname">Nachname</label>
<input type="text" id="nname" name="nname" placeholder="Dein Nachname">
<label for="Email">Email</label>
<input type="email" id="email" name="email" placeholder="beispiel@email.de">
<label for="country">Land</label>
<select id="country" name="country">
<option value="-" selected disabled>-</option>
<option value="DEU">Deutschland</option>
<option value="AUT">Österreich</option>
<option value="CHE">Schweiz</option>
</select>
<label for="message">Nachricht</label>
<textarea id="message" name="message" placeholder="Schreibe hier deine Nachricht"></textarea>
<input type="reset" id="reset" name="reset" value="Reset">
<input type="submit" id="submit" name="submit" value="Senden">
</form>
</div>
</div>
</body>
</html>
CSS:
* {
font-family: "Segoe UI", Segoe, Sans-serif;
}
div.container {
border-radius: 5px;
background-color: #F2F2F2;
padding: 20px;
}
form {
margin: auto;
}
label {
display: block;
width: 25%;
box-sizing: border-box;
margin: auto;
}
input[type=text], [type=email], select, textarea {
display: block;
width: 25%;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 3px;
box-sizing: border-box;
margin: auto;
margin-top: 5px;
margin-bottom: 15px;
resize: vertical;
outline: none;
transition: 0.5s ease-in-out;
}
input[type=text]:focus, [type=email]:focus, select:focus, textarea:focus {
border: 1px solid #999999;
}
textarea {
height: 50px;
}
textarea:focus {
height: 200px;
}
input[type=submit] {
margin: auto;
margin-top: 5px;
margin-bottom: 15px;
width: 100px;
background-color: #4caf50;
color: white;
padding: 10px 20px;
border: 1px solid #409644;
border-radius: 3px;
cursor: pointer;
display: block;
outline: none;
transition: width 0.5s ease-in-out;
}
input[type=submit]:hover {
background-color: #45a049;
width: 25%;
}
input[type=reset] {
margin: auto;
margin-top: 5px;
margin-bottom: 15px;
width: 100px;
background-color: #e7e7e7;
color: black;
padding: 10px 20px;
border: 1px solid #d3d3d3;
border-radius: 3px;
cursor: pointer;
display: block;
outline: none;
transition: width 0.5s ease-in-out;
}
input[type=reset]:hover {
background-color: #e0e0e0;
width: 25%;
}
Danke schon mal im Voraus
Gunnar Bittersmann
Matthias Apsel
MudGuard
Rolf B