web-dev-qa-db-fra.com

Créer une petite boîte de couleur en html

J'ai un élément li. À l'intérieur de l'élément li, il existe de nombreux éléments comme input, labels.

Je veux maintenant mettre une petite couleur à l'intérieur de chaque li. La couleur sera fournie dynamiquement. Je veux avoir quelque chose de carré et sur la page de chargement, il remplit la couleur que je fournis. Existe-t-il déjà quelque chose?

javascriptjqueryhtmlcolors
17
Saurabh Kumar

Cherchez-vous quelque chose comme ça?

[~ # ~] 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;
}

Voir jsFiddle pour un exemple en direct.

32
Stefan

Avertissement: je ne suis pas familier avec CSS.

Je suis devenu ennuyé par les nuances de CSS et je ne me sentais pas bien et je ne comprenais pas différentes configurations de div. Je suis tombé sur quelque chose de beaucoup plus simple (pour moi et j'espère que d'autres): utilisez SVG.

Voici un exemple de boîte rouge:

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

Lorsqu'il est utilisé avec un modèle jinja, je peux configurer le modèle de couleur en fournissant la chaîne correcte à partir de python:

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