Erstellen Sie ein kleines Farbfeld in HTML

Lesezeit: 2 Minuten

Saurab Kumar

Ich habe ein li Element. Im Inneren des li Element gibt es viele Elemente wie input, labels.

Ich möchte jetzt in jedes eine kleine Farbe hineinlegen li. Die Farbe wird dynamisch bereitgestellt. Ich möchte etwas Quadratisches haben und es füllt sich beim Laden der Seite mit der von mir bereitgestellten Farbe. Gibt es schon etwas?

Vielleicht möchten Sie einige HTML-Beispiele für Ihre Liste mit den darin enthaltenen Elementen posten

– Musefan

8. Dezember 2011 um 16:00 Uhr
Sie möchten den Farbwähler anzeigen oder es ist etwas anderes …?

– Sudhir Bastakoti

8. Dezember 2011 um 16:00 Uhr
Können wir Ihren bestehenden Code sehen? jsfiddle.net ermöglicht das Einfügen von Live-Codebeispielen.

– Paul D. Waite

8. Dezember 2011 um 16:01 Uhr
Mann, ohne ein Codebeispiel werden die Dinge schwer zu verstehen. Was willst du mit der Farbe füllen?? Wie geht es dir li Layout?

– Benutzer898741

8. Dezember 2011 um 16:01 Uhr

Stefan

Suchen Sie so etwas?

HTML

<div class="input-color">
    <input type="text" value="Orange" />
    <div class="color-box" style="background-color: #FF850A;"></div>
    <!-- Replace "#FF850A" to change the color -->
</div>

CSS

.input-color {
    position: relative;
}
.input-color input {
    padding-left: 20px;
}
.input-color .color-box {
    width: 10px;
    height: 10px;
    display: inline-block;
    background-color: #ccc;
    position: absolute;
    left: 5px;
    top: 5px;
}

Sehen jsFiddle für Live-Beispiel.

Wenn Sie etwas spät zur Party kommen, gibt es eine Möglichkeit, eine Grenze hinzuzufügen?

– Sean Duggan

23. Januar 2015 um 13:36 Uhr
Ha. Das war einfacher als gedacht. Tut mir leid, das ist ganz neu. 🙂

– Sean Duggan

26. Januar 2015 um 9:52 Uhr

David C

Haftungsausschluss: Ich kenne mich mit CSS nicht aus.

Ich ärgerte mich über die Nuancen von CSS und dass ich das Erscheinungsbild nicht ganz richtig hinbekommen habe und verschiedene Konfigurationen von divs herausgefunden habe. Ich bin auf etwas viel Einfacheres gestoßen (für mich und hoffentlich andere): Verwenden Sie SVG.

Hier ist ein Beispiel für eine gelbe Box:

<html>
Look at me - I'm a yellow box!
<svg width="20" height="20">
<rect width="20" height="20" style="fill:#E9E612;stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
</html>

Bei Verwendung mit einer Jinja-Vorlage kann ich die Füllfarbe konfigurieren, indem ich die richtige Zeichenfolge aus Python bereitstelle:

<svg width="20" height="20">
<rect width="20" height="20" style="fill:{{supplied_color_str}};stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

Es ist alte Schule, aber es ist einfach und erledigt die Arbeit.

11374400cookie-checkErstellen Sie ein kleines Farbfeld in HTML

#Abfrage #Farben #html #Javascript