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

Frage Frage zum Input Tag und der Bearbeitung in Css

Y

YoureStein

Mitglied
Hey,
habe eine Frage zu dem <input>-Tag. Wie kann ich diese in CSS bearbeiten? Ich gebe jedem ja einen Namen, kann ich das so vllt aufrufen in der Css-Datei? Oder soll ich das einfach mit einem DIV-Tag machen?
 
Werbung:
einen input kannst du in css folgendermaßen bearbeiten:

Code: 
<style>
input {
  color: red;
}
</style>

<input>

Mit CSS-Pseudoklassen und Selektoren lässt sich aber noch viel mehr machen.
Z.B:

Code: 
<style>
input[name="input1"] {
   background-color: red;
}

input[name="input2"] {
   background-color: blue;
}
</style>

<input name="input1" />
<input name="input2" />

Das es geht sogar noch weiter:

Code: 
<style>
input[name="input1"] {
   background-color: red;
}

input[name="input2"] {
   background-color: blue;
}

input[name=^"input"]:focus {
   background-color: purple;
}
</style>

<input name="input1" />
<input name="input2" />
Das Resultat ist, dass bei einem klick auf inputs, welche mit "input" ANFANGEN, die Hintergrundfarbe geändert wird.

YoureStein schrieb:
Ich gebe jedem ja einen Namen, kann ich das so vllt aufrufen in der Css-Datei?
Zum Vergrößern anklicken....
Für dein Problem reicht glaube ich Beispiel 2:

Code: 
<style>
input[name="input1"] {
   background-color: red;
}
 
input[name="input2"] {
   background-color: blue;
}
</style>
 
<input name="input1" />
<input name="input2" />
 
Ich glaube ich habe da etwas falsch erklärt bzw zu unausreichend. Ich meine nämlich die Inputs im <form> Tag.
Und du hast ja glaube ich die CSS Sachen in die Html-Datei mit reingepackt, das würde ich gerne separat machen wegen Anfänger halt. Falls ich irgendwas falsch verstehe, feel free mich zu korrigieren.
 
Werbung:
Na dann korrigier ich dich mal:
Im Prinzip muss ich da jetzt ziemlich weit ausholen, das spar ich mir jetzt aber durch eine Kurzform.
Es ist völlig irrelevant, ob die inputs in einem Form-Tag sind oder nicht.

Kurze Rekonstruktion eines Falles:
Code: 
<form name="testform" method="post">
   <input name="input1" />
   <input name="input2" />
   <button type="submit">Submit</button>
</form>

Wenn ich nun ALLE inputs ansprechen will (auch außerhalb des Forms), dann schreibe ich "input {}".
Wenn ich nun ALLE inputs INNERHALB von ALLEN Forms eines HTML-Dokumentes ansprechen will, schreibe ich "input form {}".
Noch ein paar Beispiele:
Wenn ich nun eine andere Formstruktur habe:
Code: 
<form name="testform" method="post">
   <input name="input1" />
   <input name="input2" />
   <div>
        <input name="input3" />
   </div>
   <button type="submit">Submit</button>
</form>
und ich will NUR input3 ansprechen, dann kann ich das über verschiedene Varianten machen.
"form > div > input {}", "form[name="testform"] input[name="input3"] {}"... es gibt da 1000 Wege mehr.

Um dich jetzt nicht weiter zu verwirren, empfehle ich dir:
Schau dir CSS-Selektoren an (Wenn du die drauf hast, bist du schon mal einen Riesenschritt weiter)
und schau dir auch die CSS-Pseudoklassen an. Auch diese sind wichtig. Wenn du das beides drauf hast, wird dir CSS um einiges leichter fallen.

Edit:
Okay meine "Kurzform" war wohl doch nicht so kurz wie ich dachte xD. Ich hoffe ich hab dich jetzt nicht mehr verwirrt oder so ;)

2. Edit:
YoureStein schrieb:
Und du hast ja glaube ich die CSS Sachen in die Html-Datei mit reingepackt, das würde ich gerne separat machen wegen Anfänger halt
Zum Vergrößern anklicken....
Was genau meinst du mit "seperat"? Eine externe CSS-Datei?
 
Zu deinem 2. Edit: Ja genau in eine externe CSS-Datei.
Okay da ich gerade noch ein paar Probleme habe will ich dir hier mal ein Beispiel auflisten und mal was dazu fragen.

<form>
<input type="text" Name="MeinText">
</form>

So wie bekomme ich diesen in meine CSS-Datei. Also sagen wir ich möchte die "font-size" auf 40 stellen.
Also wie bekomme ich das in der CSS-Datei in den Selektor um diese dann zu ändern.
 
Tja ich liste dir hier mal ein paar auf und schreibe dahinter, wie es das input anspricht:

Code: 
input {
  font-size: 40px;
} // Spricht ALLE inputs im ganzen HTML-Dokument an (sowohl den im Beispiel, als auch andere)

form input {
   font-size: 40px;
} //Spricht ALLE inputs an, SOFERN sie in einem Form sind (unpraktisch bei mehreren Form-Tags)

form > input {
   font-size: 40px;
} //Spricht alle inputs an, deren direktes Mutterelement ein form ist.


//So nun zu den Beispielen, die NUR DIESES EINE input ansprechen (auch wenn du andere Forms hast usw.)
input[name="MeinText"] {
   font-size: 40px;
}// Spricht das input an, welches als Attribut name="MeinText" hat.

Edit:
Zur Erklärung:
Viele Wege führen nach Rom. Diese Regel gilt auch hier. Welche Variante du nimmst ist immer Situationsbedingt. Wenn du nur ein form hast, reicht "form input{ font-size: 40px; }. Wenn du nun aber mehrere Forms hast, und jeder input eigene CSS-Attribute haben sollen, ist input[name="MeinText"] sinnvoller.

ALLE aufgelisteten Varianten funktionieren bei deinem Beispiel. Welches du nimmst, musst du anhand des restlichen Dokumentes festlegen.
 
Werbung:
Ok dann tausend Dank für deine Hilfe auch wenn ich mich ziemlich "schlecht" angestellt habe um es zu verstehen. Ich werde mir auf jeden Fall mal Videos angucken zu den Selektoren etc was du meintest.
 
Ah ok, da ich für mich aber herausgefunden habe mit Videos es besser zu lernen werde ich erst einmal darauf zugreifen und deine Links als Ergänzung benutzen :)
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben