Input Felder stylen?

Hey liebe HTML und CSS Community! :)

Ich habe verschiedene Input Felder und ich hätte es gerne so, dass ich jedes einzeln mit CSS stylen kann.

Wenn ich das aktuell mit CSS mache wird jedes Input Feld so gestyled.

Bitte um Hilfe!

4 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

argentinien187

22.07.2020, 18:50

du kannst es mit ids machen also im HTML Code den ID Tag an einen Input hängen und in CSS mit #id {} die Eigenschaften ändern.

Lukas665

Fragesteller

22.07.2020, 18:51

bedeutet dass ich das so schreiben muss?

HTML:

argentinien187

22.07.2020, 18:54

@Lukas665

Nicht ganz. In HTML:

macht ein Input Feld vom Typ Text mit der gegebenen ID. In CSS:

#dasIstEineFreiWaehlabreID {

font-size: 50px;

}

würde dann die Schriftgröße nur von genau diesem Input Feld ändern. Es kann aber nicht 2mal gleiche IDs geben, wenn du das willst müsstest du Klassen benutzen.

Lukas665

Fragesteller

22.07.2020, 18:56

@argentinien187

Ok das hat mir weiter geholfen vielen Dank!

argentinien187

22.07.2020, 18:57

@Lukas665

Dafür bin ich da :D

Lukas665

Fragesteller

22.07.2020, 19:01

@argentinien187

NackterGerd

23.07.2020, 00:05

@Lukas665

https://wiki.selfhtml.org/wiki/CSS/Selektoren/ID-Selektor

ItachiDontDie

23.07.2020, 12:01

@Lukas665

nein, so:

html:

css:

#beispiel {

Hier jetzt die Eigenschaften die du ändern möchtest rein

}

flumex

22.07.2020, 18:58

Du musst dafür entweder für jedes Element eine ID verwenden oder für jedes Element eine separate Klasse.

html

<input id="myInput1">

CSS

#id {
}

Lukas665

Fragesteller

22.07.2020, 18:59

Ok. Danke für die Hilfe :)

B3n2002

25.07.2020, 04:03

Du gibst jedem Input eine eigene ID oder Class. ID macht bei deiner Idee mehr Sinn. Viel Glück

Woher ich das weiß:eigene Erfahrung

NackterGerd

23.07.2020, 00:03

Du musst halt jedem eine eigene ID geben.

Dann kannst du für jede ID einen eigenen Style erstellen anstatt nur einen für die Klasse.

Ähnliche Fragen

Sudoku-Feld mit CSS und HTML?

Ich bin gerade dabei ein Sudoku in PHP zu programmieren.

Meine Frage: Ist es möglich, dass ich die 81 Felder nicht alle, wie hier -->(<td><input id="cell-0" type="text"></td>) erstellen muss? Sprich, wie schaffe ich es, dass ich 81 Felder habe, die ich einstellen kann, ohne dass ich sie 81 mal erstellen muss und sie in CSS verändern kann?

Ich freue mich über jede Antwort! :)

...zur Frage

HTML und CSS Rechner - Input?

Wie bekomme ich es hin, dass , wenn ich eine Taste drücke diese Zahl dann in das Input Feld gelangt?
Danke im voraus!

...zur Frage

Input type date?

Hallo, ich habe einen "input type date" auf meiner Website. Er ist aber standardmäßig weiß, was nicht zum Design der Website passt. Gibt es eine Möglichkeit es mit CSS oder anderwärtig zu stylen?

...zur Frage

nur zahlen eingeben in input feld mit html?

Wie kann ich es verhindern, das man in ein input feld buchstaben und negative zahlen eigeben kann? bitte mit html

...zur Frage

Html wie kann ich den durchsuchen button stylen wie bei input?

Hier ist mein button mit input:

--- und hier ist die form die ich eigentlich mit stylen will was ich aber nicht hinbekomme mit stylen:

File:

...zur Frage

HTML/CSS Blauen Kasten um Input entfernen?

Also ich habe einen kleinen Login erstellt, aber wenn ich den Input für z.B. den Username auswähle, zeigt es wegen der border-radius einen blauen, eckigen Kasten um den Input an.

Mein Frage wäre jetzt, ob man den irgendwie mit z.B. ":active" entfernen kann.

...zur Frage

HTML schreiben und danach CSS anwenden oder den Code schreiben und sofort mit CSS stylen?

In Bezug auf eine responsive site zum Beispiel.

...zur Frage

Html, CSS und JS Liste?

Guten Tag,

Wir müssen eine Einkaufsliste mit HTML, CSS und JS machen. Es soll in einer Liste aufgezählt werden, wenn man auf Hinzufügen drückt. Man soll es links eingeben können und das was man dort schreibt wird dann aufgelistet. Sobald man Hinzufügen gedrückt hat soll das Feld auf der linken Seite wieder geleert werden.

<ul >
 <li></li>
 <li></li>
</ul>

Es wäre top, wenn mir jemand helfen könnte :)

...zur Frage

HTML Problem Elementen Hintergrund?

Hallo,
eine kurze, Frage. Wie kriege ich das in css hin das alle Elemente einen Grauen Hintergrund bekommen ohne das ich das für jedes Element einzeln machen muss und ohne das ich den HTML Code ändern muss? Also wirklich nur die Elemente nicht den ganzen body.

...zur Frage

[HTML|CSS] <Datalist> größe ändern?

Ist es überhaupt möglich die Eigenschaften (zb Size) einer <Datalist> zu ändern?

HTML:

<datalist id="users" class="dle" >
    ...
</datalist>

CSS:

.dle{
    padding: 3px 4px;
    width: 91px;
    font-size: 15px;
}

Leider passiert da rein gar nichts.

Mit <Input> Feldern und anderen klappt es aber.

...zur Frage

.gif Datei als HTML Hintergrund?

Hey Community! ich möchte mittels html & css ein .gif Video als hintergrund in einer .html benutzen. wie wäre dafür der code in html und css?

...zur Frage

Mit Input Element rechnen (JavaScript)?

Ich fange gerade an, programmieren zu lernen (HTML, Js, CSS) und bin gerade dabei eine Website zu coden, die Meilen in Kilometer umrechnet. Man gibt beim Input Feld die Meilen ein und wenn man den Button Convert drückt sollen diese in Kilometern angegeben werden. Bei der Js Funktion mit dem Button kommt allerdings immer NaN (Not a Number) heraus, wenn ich mit dem Eingegeben weiterrechnen möchte. Wisst ihr wie man den String von der Eingabe zu einem Zahlenwert machen kann, sodass die Funktion damit weiterrechnen kann? Danke

...zur Frage

Wie würdet ihr es in HTML schreiben und später mit CSS stylen?

Hallo Leute.

Ich wollte den Header mit einem Bild in der Mitte zentriert und zwei Links, jeweils links und rechts darstellen.

Die Darstellung die ich wollte, habe ich hinbekommen.

(Es geht nur um die Positionierung der Elemente, und nicht um Farben, oder ob man die Links nicht im Header, sondern wo Anders positionieren sollte. Es geht explizit um diese Darstellung im Header-Breich.)

Bild 1(Browser): >>>>>>>>>>

Bild 2(HTML): >>>>>>>>>>

Bild 3(CSS): >>>>>>>>>>

Meine Frage wäre: Wie würdet ihr denn die HTML schreiben und anschließend mit CSS stylen, um so ein Ergebnis zu erreichen.

Ich bin mir ziemlich sicher, dass meine Variante nicht die übliche Variante ist, die ein erfahrener in diesem Bereich bevorzugen würde.

Danke.

...zur Frage

Image lässt sich nicht in css stylen?

Guten Abend Gutefrage.net - Community!

Ich habe nun schon seit einigen Minuten folgendes Problem mit CSS:

Ich möchte mit einer class ein Icon stylen, da ich mehrmals das gleiche Icon auf der Website verwende. Wenn ich nun aber in das img-tag die class "small_icon" hinzufüge und in css die class so bearbeite, wie ich das Bild brauche, funktioniert es nicht.

Hier der Code:

CSS

HTML

Der Style wird auf der Website einfach nicht verwendet. Weiß jemand warum oder was ich ändern muss, damit das funktioniert?

MfG, Jonas

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen