textarea
Hallo liebe Community,
ich wollte ein Kontaktformular machen und habe jetzt folgende Frage zu der Textarea.
Code ist unten.
1)
Was für einen Befehlt gibt es, um die kleine Ecke zum selber vergrößern/verkleinern zu verbieten?
2)
Die styleatribute von dem Input "text" kann ich nicht auf die Textarea anwenden, bei Textarea gibt es iwi Unterschiede von focus und valid.
Kann mir da jmd. helfen, die gleiche Animation darauf zu beklommen?
Der hier verwendete Code
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#contact{
border: 4px solid black;
border-radius: 25px;
width: 80%;
background: #a1ffff;
margin:0 auto;
}
#contact h1{
margin-top: 0px;
margin-bottom: 20px;
padding: 10px;
text-align: center;
}
.padding{
padding: 50px;
padding-top: 0px;
display:flex;
flex-direction:column;
}
.inputBox{
padding: 10px 0;
display:flex;
}
.inputBox input,
.inputBox textarea{
width: 100%;
padding: 10px;
border: 1px solid black;
border-radius: 5px;
outline: none;
font-size: 1em;
transition: 0.5s;
}
.inputBox span {
padding: 10px;
position:absolute;
margin-bottom:10px;
pointer-events: none;
font-size: 0.7em;
letter-spacing: 0.2em;
text-transform: uppercase;
transition: 0.5s;
font-weight: bolder;
}
.inputBox input:focus ~ span,
.inputBox textarea:focus ~ span{
transform: translateX(7px) translateY(-7px);
font-size: 0.65em;
padding: 0 5px;
background: white;
}
.inputBox input:focus:placeholder-shown ~ span,
.inputBox textarea:focus:placeholder-shown ~ span,
.inputBox input:valid ~ span,
.inputBox textarea:valid ~ span{
color:green;
}
.inputBox input:invalid ~ span ,
.inputBox textarea:invalid ~ span ,
.inputBox input:invalid:focus ~ span ,
.inputBox textarea:invalid:focus ~ span{
color:red;
}
.inputBox input:placeholder-shown ~ span ,
.inputBox textarea:placeholder-shown ~ span{
color:black;
}
*[type="email"]:not(:placeholder-shown):not(:focus):invalid ~ span {
color:red;
}
button{
width: 100%;
font-size: 1.1em;
outline: none;
border: 3px solid black;
border-radius: 5px;
transition: 0.3s;
color: black;
font-weight: bolder;
background: #a1ffff;
margin-top:20px;
}
</style>
</head>
<body>
<form>
<aside id="contact">
<h1>Contact</h1>
<div class="padding">
<div class="inputBox">
<input type="text" placeholder=" " required>
<span>First Name</span>
</div>
<div class="inputBox">
<input type="text" placeholder=" " required>
<span>Last Name</span>
</div>
<div class="inputBox">
<input type="email" placeholder=" " required>
<span>E-mail</span>
</div>
<div class="inputBox">
<input type="text" placeholder=" " required maxlength="5">
<span>Property ID</span>
</div>
<div class="inputBox message">
<textarea name="message" cols="30" rows="10" placeholder=" " required></textarea>
<span>Message</span>
</div>
<button >Submit</button>
</div>
</aside>
</form>
</body>
</html>