• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

textarea

H

Hannes Tunk

Neues Mitglied
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?

Gruß Hannes




CODE:



<html lang="de">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<aside id="contact">
<h1>Contact</h1>
<div class="padding">
<div class="inputBox">
<input type="text" required="required">
<span>First Name</span>
</div>
<div class="inputBox">
<input type="text" required="required">
<span>Last Name</span>
</div>

<div class="inputBox">
<input type="text" required="required">
<span>E-mail</span>
</div>
<div class="inputBox">
<input type="text" required="required" maxlength="5">
<span>Property ID</span>
</div>
<div class="inputBox message">
<textarea name="message" cols="30" rows="10"></textarea>
<span>Message</span>
</div>
<button>Submit</button>
</div>
</aside>


<style>/*Contact formular*/
.inputBox{
position: relative;
padding: 10px 0;
}
.inputBox input,textarea{
width: 100%;
padding: 10px;
border: 1px solid black;
border-radius: 5px;
outline: none;
font-size: 1em;
transition: 0.5s;
}
.inputBox span{
position: absolute;
left: 0;
padding: 10px;
pointer-events: none;
font-size: 0.7em;
letter-spacing: 0.2em;
text-transform: uppercase;
transition: 0.5s;
font-weight: bolder;
}
.inputBox input:valid ~ span,
.inputBox input:focus ~ span{
color: green;
transform: translateX(10px) translateY(-7px);
font-size: 0.65em;
padding: 0 5px;
background: white;
border-left: 1px solid green;
border-right: 1px solid green;
letter-spacing: 0.2em;
}
.inputBox input:valid,
.inputBox input:focus{
border: 1px solid green;
}
#contact{
border: 4px solid black;
border-radius: 25px;
width: 25%;
background-color: #a1ffff;
}
#contact h1{
margin-top: 0px;
margin-bottom: 20px;
padding: 10px;
text-align: center;
}
.padding{
padding: 50px;
padding-top: 0px;
}
button{
width: 100%;
font-size: 1.1em;
cursor: pointer;
outline: none;
border: 3px solid black;
border-radius: 5px;
transition: 0.3s;
color: black;
font-weight: bolder;
background-color: #a1ffff;
}</style>


</body>
</html>
 
Hey,

"Zu 1.: https://developer.mozilla.org/de/docs/Web/CSS/resize"

Das hat jetzt funktioniert, Danke.

"Zu 2.: Ich wüsste jetzt nicht, dass es da einen Unterschied geben sollte. Was Du dort machst animiert vor allem nichts am Formularfeld sondern am nachfolgenden <span>."

Dachte ich mir eben auch, und habe bei dem code beispielsweise:

.inputBox input:valid ~ span,
.inputBox input:focus ~ span{
color: green;
transform: translateX(10px) translateY(-7px);
font-size: 0.65em;
padding: 0 5px;
background: white;
border-left: 1px solid green;
border-right: 1px solid green;
letter-spacing: 0.2em;
}
das "input" durch "textarea" geändert.

.inputBox textarea:valid ~ span,
.inputBox textarea:focus ~ span{
color: green;
transform: translateX(10px) translateY(-7px);
font-size: 0.65em;
padding: 0 5px;
background: white;
border-left: 1px solid green;
border-right: 1px solid green;
letter-spacing: 0.2em;
}

Aber wgs. bei Textarea gibts iwi einen anderen "valid" und "fokus" Term.
Da bei dem Textfeld die Animation der bereits eingetippten Eingabe von Anfang an ausgeführt wird (sprich es ist grün, obwohl nix eingegeben wurde).

Da hänge ich ja auch dran XD

Danke aber für die Antwort, hoffe noch auf eine Lösung.
Gruß Hannes
 
Du weißt aber das die require Attributen so gar nicht richtig arbeiten ?
Mit einen Form Elemente funktioniert valid und invalid super.
Der CSS Code läuft bei mir auch auf den Textarea
Code: 
.inputBox input:focus ~ span,
.inputBox textarea:focus ~ span {
color: green;
transform: translateX(10px) translateY(-7px);
font-size: 0.65em;
padding: 0 5px;
background: white;
border-left: 1px solid green;
border-right: 1px solid green;
letter-spacing: 0.2em;
}
 
Hey,
danke für die Hilfe. Mein Code läuft, jetz auch auf der textarea. Keine Ahnung, warum er da gezickt hatte...
Ja das required muss ich ja nur als Attribut reinmachen(<input type="text" required>), hatte ich iwo mal falsch aufgenommen.

Danke für deine Hilfe.

Gruß
 
Wie hast du das den jetzt gemacht?
Ich würde es zb mit einem Schwarzen Border machen oder so.
Wenn der Eintrag valid ist, soll er früh werden und wenn er nicht valid ist rot.

Das würde für mich ein Sinn ergeben.
Zeig doch mal dein Code, wie es jetzt aussieht.
 
basti1012 schrieb:
Wie hast du das den jetzt gemacht?
Ich würde es zb mit einem Schwarzen Border machen oder so.
Wenn der Eintrag valid ist, soll er früh werden und wenn er nicht valid ist rot.

Das würde für mich ein Sinn ergeben.
Zeig doch mal dein Code, wie es jetzt aussieht.
Zum Vergrößern anklicken....
Heyhey basit1012,
ich habe jetzt die Farbe Orange für "valid" genommen, da ich diese schon in meiner Nav hatte und ich nicht allzu viele verschiedene Farben auf meiner Webseite möchte...

Gruß Hannes

Code ist hier:

<html lang="de">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<aside id="contact">
<h1>Contact</h1>
<div class="padding">
<div class="inputBox">
<input type="text" required>
<span>First Name</span>
</div>
<div class="inputBox">
<input type="text" required>
<span>Last Name</span>
</div>
<div class="inputBox">
<input type="text" required>
<span>E-mail</span>
</div>
<div class="inputBox">
<input type="text" required maxlength="5">
<span>Property ID</span>
</div>
<div class="inputBox">
<textarea name="message" cols="30" rows="10" required></textarea>
<span>Message</span>
</div>
<button>Submit</button>
</div>
</aside>


<style>
/* Contact formular */
.inputBox{
position: relative;
padding: 10px 0;
}
.inputBox input, textarea{
width: 100%;
padding: 10px;
border: 1px solid black;
border-radius: 5px;
outline: none;
font-size: 1em;
transition: 0.5s;
}
.inputBox span{
position: absolute;
left: 0;
padding: 10px;
pointer-events: none;
font-size: 0.7em;
letter-spacing: 0.2em;
text-transform: uppercase;
transition: 0.5s;
font-weight: bolder;
}
.inputBox input:valid ~ span,
.inputBox input:focus ~ span{
color: black;
transform: translateX(10px) translateY(-7px);
font-size: 0.65em;
padding: 0 5px;
background: white;
border-left: 1px solid #fbe17a ;
border-right: 1px solid #fbe17a ;
letter-spacing: 0.2em;
}
.inputBox input:valid,
.inputBox input:focus{
border: 1px solid #fbe17a ;
}
.inputBox textarea:valid ~ span,
.inputBox textarea:focus ~ span {
color: black;
transform: translateX(10px) translateY(-7px);
font-size: 0.65em;
padding: 0 5px;
background: white;
border-left: 1px solid #fbe17a;
border-right: 1px solid #fbe17a;
letter-spacing: 0.2em;
}
.inputBox textarea:valid,
.inputBox textarea:focus{
border: 1px solid #fbe17a ;
}
#contact{
width: 25%;
border: 2px solid white;
line-height: normal;
}
#contact h1{
margin-top: 0px;
margin-bottom: 20px;
padding: 10px;
text-align: center;
text-decoration: underline;
}
.padding{
padding: 50px;
padding-top: 0px;
}
.message{
height: 50%;
width: 100%;
}
textarea{
resize: none;
}
button{
width: 100%;
font-size: 1.1em;
cursor: pointer;
outline: none;
border: 2px solid #fbe17a;
border-radius: 5px;
transition: 0.3s;
color: #fbe17a;
font-weight: bolder;
padding: 10px 0;
background-color: white;
}
button:hover{
background-color: #fbe17a;
color: black;
border: 2px solid black;
}
#contact:hover{
border: 2px solid black;
border-radius: 10px;
transition: 1s;
}
</style>


</body>
</html>
 
Ich muss ehrlich gestehen, dass ich keine Ahnung habe, was du vorhast .
Ich kann in den Feldern alles reinschreiben, was ich will und es ist immer valide (orange ).
Sinn ergeben tut es für mich eigentlich nur ,dass es bei richtiger Validierung grün wird (bei dir orange)
Bei falsche Validierung rot, und sonst schwarz oder so.

In deinen jetzigen Code sind die valid: Einträfe eigentlich nutzlos
 
Hey Basti,
tut mir leid, das ich micht jetzt erst melde. Vielen Dank für deine Hilfe, so in etwa habe ich das auch letztendlich gemacht.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben