it-swarm-eu.dev

Existuje snadný způsob, jak změnit barvu odrážky v Seznam?

Vše, co chci, je být schopen změnit barvu odrážky v seznamu na světle šedou. Výchozí nastavení je černé a nemůžu přijít na to, jak to změnit.

Vím, že jsem mohl použít obrázek; Raději bych to neudělala, kdybych jí mohla pomoci.

81
Dave Haynes

Kulka dostane svou barvu z textu. Pokud tedy chcete mít jinou barevnou odrážku než text ve svém seznamu, budete muset přidat nějaké značení.

Zalomte text seznamu v rozpětí:

<ul>
  <li><span>item #1</span></li>
  <li><span>item #2</span></li>
  <li><span>item #3</span></li>
</ul>

Upravte pravidla svého stylu mírně:

li {
  color: red; /* bullet color */
}
li span {
  color: black; /* text color */
}
156
Prestaul

Podařilo se mi to bez přidání značek, ale místo toho pomocí li: předtím. Toto má samozřejmě všechna omezení :before (žádná stará podpora IE), ale zdá se, že funguje s IE8, Firefoxem a Chrome po velmi omezeném testování. Pracuje v prostředí našeho kontrolora a přemýšlí, jestli by to někdo mohl zkontrolovat. Střela je také omezena tím, co je v unicode.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style type="text/css">
    li {
      list-style: none;
    }

    li:before {
      /* For a round bullet */
      content:'\2022';
      /* For a square bullet */
      /*content:'\25A0';*/
      display: block;
      position: relative;
      max-width: 0px;
      max-height: 0px;
      left: -10px;
      top: -0px;
      color: green;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <ul>
    <li>foo</li>
    <li>bar</li>
  </ul>
</body>
</html>
44
Marc

To bylo v roce 2008 nemožné, ale brzy to bude možné (doufejme)!

Podle Specifikace W3C CSS3 , můžete mít plnou kontrolu nad libovolným číslem, glyfem nebo jiným symbolem generovaným před položkou seznamu s pseudoprvkem ::marker. řešení:

<ul>
  <li>item #1</li>
  <li>item #2</li>
  <li>item #3</li>
</ul>

li::marker {
  color: red; /* bullet color */
}
li {
  color: black /* text color */
}

Příklad JSFiddle

Všimněte si však, že od července 2016 je toto řešení pouze součástí pracovního návrhu W3C a nefunguje v žádném z hlavních prohlížečů.

Chcete-li tuto funkci, postupujte takto:

16
Supuhstar
<ul>
  <li style="color: #888;"><span style="color: #000">test</span></li>
</ul>

velkým problémem této metody je další značení. (značka rozpětí)

5
Jonathan Arkell

Prostě udělejte kulku v grafickém programu a použijte list-style-image:

ul {
  list-style-image:url('gray-bullet.gif');
}
2
ghr

Dobrý den, možná je tato odpověď pozdě, ale je to správné, aby toho bylo dosaženo.

Ok faktem je, že musíte zadat interní značku, aby se text LIst nacházel v obvyklé černé barvě (nebo co chcete získat). Ale je také pravda, že můžete REDEFINE libovolné TAGS a interní značky s CSS. Nejlepší způsob, jak to provést, je použít kratší značku pro předefinování

Použít tuto definici CSS:

li { color: red; }
li b { color: black; font_weight: normal; }
.c1 { color: red; }
.c2 { color: blue; }
.c3 { color: green; }

A tento html kód:

<ul>
<li><b>Text 1</b></li>
<li><b>Text 2</b></li>
<li><b>Text 3</b></li>
</ul>

Získáte požadovaný výsledek. Také si můžete vytvořit jinou barvu disku:

<ul>
    <li class="c1"><b>Text 1</b></li>
    <li class="c2"><b>Text 2</b></li>
    <li class="c3"><b>Text 3</b></li>
 </ul>
2
Dragnovich

Zabalte text do položky seznamu rozpětím (nebo jiným prvkem) a použijte barvu odrážky na položku seznamu a barvu textu na rozpětí.

0
user4903

Funguje to i tehdy, když nastavíme barvu pro každý prvek, například: Přidal jsem nyní Margin, který nyní odešel.

<article class="event-item">
    <p>Black text here</p>
</article>

.event-item{
    list-style-type: disc;
    display: list-item;
    color: #ff6f9a;
     margin-left: 25px;
}
.event-item p {
    margin: 0;
    color: initial;
}
0
Mohammed

Podle W3C spec

Vlastnosti seznamu ... neumožňují autorům specifikovat odlišný styl (barvy, písma, zarovnání atd.) Pro značku seznamu ...

Ale nápad s rozpětím uvnitř výše uvedeného seznamu by měl fungovat dobře!

0
Aeon

Můžete použít Jquery, pokud máte spoustu stránek a nepotřebujete jít a upravovat značkovací značku.

zde je jednoduchý příklad:

$("li").each(function(){
var content = $(this).html();
var myDiv = $("<div />")
myDiv.css("color", "red"); //color of text.
myDiv.html(content);
$(this).html(myDiv).css("color", "yellow"); //color of bullet
});
0
alaasdk
<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>
0
User

Pro rok 2008 jsem si myslel, že bych mohl přidat novější a up-to-date odpověď na to, jak byste mohli jít o změně barvy odrážek v seznamu.

Pokud jste ochotni používat externí knihovny, Font Awesome vám poskytuje škálovatelné vektorové ikony , a když je kombinován s Bootstrap's helper třídami (např. text-success), můžete si udělat nějaké pěkné a přizpůsobitelné seznamy.

Rozbalil (a) jsem extrakt z stránka s ukázkami Font Awesome list níže:

Pomocí fa-ul a fa-li snadno nahradíte výchozí odrážky v neuspořádaných seznamech.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<ul class="fa-ul">
  <li><i class="fa-li fa fa-circle"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square text-success"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin text-primary"></i>as bullets</li>
  <li><i class="fa-li fa fa-square text-danger"></i>in lists</li>
</ul>

Písmo Awesome (většinou podporuje IE8 , a podporuje pouze IE7, pokud používáte starší verze 3.2.1 .

0
eggy