Span kullanmadan bir HTML listesinin madde işaretlerinin rengini değiştirme

Bir listede mermilerin üzerindeki rengi değiştirmenin bir yolu olup olmadığını merak ediyordum.

Bunun gibi bir listem var:

<ul>
   <li>House</li>
   <li>Car</li>
   <li>Garden</li>
</ul>

Li'lerin içine 'span' og a 'p' gibi bir şey eklemem mümkün değil. Öyleyse mermilerin rengini değiştirebilir miyim ama metni akıllıca bir şekilde değiştiremez miyim?

Bir resmi kullanabiliyorsanız, bunu yapabilirsiniz. Ve bir görüntü olmadan yalnızca madde işaretlerinin rengini değiştiremezsiniz, metni değiştiremezsiniz.

Bir görüntü kullanmak

li { list-style-image: url(images/yourimage.jpg); }

Görmek

liste stili resim

Bir görüntü kullanmadan

Ardından, HTML biçimlendirmesini düzenlemeniz ve listenin içine bir yayılma alanı eklemeniz ve li ve span'ı farklı renklerle renklendirmeniz gerekir.

Bunu işaretleme eklemeden, bunun yerine kullanarak başardım li:before. Bu açıkça tüm sınırlamalara sahiptir :before(eski IE desteği yoktur), ancak bazı çok sınırlı testlerden sonra IE8, Firefox ve Chrome ile çalışıyor gibi görünüyor. Madde işareti stili de unicode'dakilerle sınırlıdır.

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

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Css'de satır içi yapabileceğimiz s list-style-imageile birleştirebilirizsvg ! Bu yöntem, her şeye dönüşebilen "mermiler" üzerinde inanılmaz bir kontrol sağlar.

Kırmızı bir daire elde etmek için aşağıdaki css'yi kullanmanız yeterlidir:

ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}

Ama bu sadece başlangıç. Bu, o mermilerle istediğimiz her çılgın şeyi yapmamızı sağlıyor. daireler veya dikdörtgenler kolaydır, ancak çizebileceğiniz her şey svgoraya yapıştırılabilir! Aşağıdaki bullseye örneğine bakın:

ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/></svg>');
}
ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="0" y="0" height="10" width="10"/></svg>');
}
ul ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="3"/></svg>');
}
ul ul ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="2" y="2" height="4" width="4"/></svg>');
}
ul.bulls-eye {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/><circle fill="white" cx="5" cy="5" r="4"/><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}
ul.multi-color {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="15" height="15"><circle fill="blue" cx="6" cy="6" r="6"/><circle fill="pink" cx="6" cy="6" r="4"/><circle fill="green" cx="6" cy="6" r="2"/></svg>');
}

<ul>
  <li>
    Big circles!

    <ul>
      <li>Big rectangles!</li>
      <li>b
        <ul>
          <li>Small circles!</li>
          <li>c
            <ul>
              <li>Small rectangles!</li>
              <li>b</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>b</li>
</ul>

<ul class="bulls-eye">
  <li>Bulls</li>
  <li>eyes.</li>
</ul>

<ul class="multi-color">
  <li>Multi</li>
  <li>color</li>
</ul>

Genişlik / yükseklik özellikleri

Bazı tarayıcılar widthve heightözniteliklerin üzerinde ayarlanmasını gerektirir <svg>veya hiçbir şey göstermezler. Yazım sırasında, Firefox'un son sürümleri bu sorunu sergilemektedir. Örneklerde her iki özelliği de ayarladım.

Kodlamalar

Son zamanlarda yapılan bir yorum bana data-uri'nin kodlamalarını hatırlattı. Bu son zamanlarda benim için acı bir noktaydı ve araştırdığım bazı bilgileri paylaşabilirim.

Veri uri spek hangi referanslar, URI Spec , svg göre kodlanmış gerektiğini söyler URI spec . Bu, her türden karakterin kodlanması gerektiği anlamına gelir, örneğin <olur %3C.

Bazı kaynaklar, kodlama sorunlarını çözmesi gereken base64 kodlamasını önerir, ancak bu, SVG'nin boyutunu gereksiz şekilde artırırken, URI kodlaması bunu yapmaz. URI kodlamasını öneririm.

Daha fazla bilgi:

tarayıcı desteği: > ie8

svgs'de css hileleri

svgs üzerinde mdn

@ Marc'ın çözümünden yola çıkarak - madde işareti karakteri farklı yazı tipleri ve tarayıcılarla farklı şekilde işlendiğinden, üzerinde daha fazla kontrole sahip olduğum bir madde işareti yapmak için border-radius ile aşağıdaki css3 tekniğini kullandım:

li:before {
    content: '';
    background-color: #898989;
    display: inline-block;
    position: relative;
    height: 12px;
    width: 12px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    margin-right: 4px;
    top: 2px;
}

Bunun gerçekten çok eski bir soru olduğunu biliyorum ama bununla oynuyordum ve yayınladığını görmediğim bir yol buldum. Listeye bir renk verin ve ardından ::first-lineseçiciyi kullanarak metin renginin üzerine yazın . Uzman değilim, bu yüzden belki de bu yaklaşımda kaçırdığım bir yanlışlık var, ama işe yarıyor gibi görünüyor.

li {
  color: blue;
}

li::first-line {
  color: black;
}

<ul>
  <li>House</li>
  <li>Car</li>
  <li>Garden</li>
</ul>

Hem @Marc hem de @jessica çözümlerini geliştirmek - Kullandığım çözüm bu:

li { 
   position:relative;
}
li:before {
      content:'';
      display: block;
      position: absolute;
      width: 6px;
      height:6px;
      border-radius:6px;
      left: -20px;
      top: .5em;
      background-color: #000;
}

emYazı tipi boyutları için kullanıyorum , böylece topdeğerinizi olarak ayarlarsanız .5em, her zaman metnin ilk satırının orta noktasına yerleştirilecektir. left:-20pxTarayıcılarda madde işaretlerinin varsayılan konumu olduğu için kullandım : ana padding/2

Marc'ın cevabını da gerçekten beğendim - bir dizi farklı renkli UL'ye ihtiyacım vardı ve açıkçası bir sınıfı kullanmak daha kolay olurdu. Örneğin portakal için kullandığım şey:

ul.orange {
    list-style: none;
    padding: 0px;
}
ul.orange > li:before {
    content: '\25CF ';
    font-size: 15px;
    color: #F00;
    margin-right: 10px;
    padding: 0px;
    line-height: 15px;
}

Ayrıca, "içerik:" için kullandığım onaltılık kodun Marc'ınkinden farklı olduğunu buldum (bu onaltılık daire biraz fazla yüksekte görünüyordu). Kullandığım tam ortada oturuyor gibi görünüyor. Ben de birkaç başka şekiller bulundu (kareler, üçgenler, daireler, vs) tam burada

Benim için en iyi seçenek CSS sözde öğeleri kullanmaktır, bu nedenle discmadde işareti şekillendirme için şöyle görünecektir:

ul {
  list-style-type: none;
}

li {
  position: relative;
}

li:before {
  content: '';
  display: block;
  position: absolute;
  width: 5px; /* adjust to suit your needs */
  height: 5px; /* adjust to suit your needs */
  border-radius: 50%;
  left: -15px; /* adjust to suit your needs */
  top: 0.5em;
  background: #f00; /* adjust to suit your needs */
}

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

Notlar:

• width ve height işaretçileri yuvarlatılmış tutmak için eşit değerlere sahip olmalıdır
• Madde işaretlerini listelemek border-radiusistiyorsanız sıfıra ayarlayabilirsinizsquare

Daha fazla madde işareti stili için başka css şekillerini kullanabilirsiniz https://css-tricks.com/examples/ShapesOfCSS/ (sözde öğelerin çalışmasını gerektirmeyen, örneğin üçgenler gibi)

::işaretleyici

::markerBir liste öğesinin işaret kutusunu (yani madde işaretleri veya numaralar) seçmek için CSS sözde öğesini kullanabilirsiniz.

ul li::marker {
  color: red;
}

Not: Bu cevabı gönderirken, bu deneysel teknoloji olarak kabul edilir ve yalnızca Firefox ve Safari'de (şimdiye kadar) uygulanmıştır.

@ Ddilsaver'ın cevabına dayanıyor. Mermi için bir sprite kullanabilmek istedim. Bu işe yarıyor gibi görünüyor:

li {
  list-style: none;
  position: relative;
}

li:before {
  content:'';
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  left: -30px;
  top: 5px;
  background-image: url(i20.png); 
  background-position: 0px -40px; /* or whatever offset you want */
}

Bunu bugün denedim ve şunu
yazdım: Listelerimde (hem madde işaretleri hem de sayılar) renkli işaretçileri göstermem gerekiyordu. Bu ipucu üzerine geldim ve stil sayfamda özelliklerin karşılıklı olarak paylaşılmasını yazdım:

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0 0 0 15px;
}
ul {}
ol {
  counter-reset: li;
}
li {
  padding-left: 1em; 
}
ul li {}
ul li::before,
ol li::before {
  color: #91be3c;
  display: inline-block;
  width: 1em;
}
ul li::before {
  content: "\25CF";
  margin: 0 0.1em 0 -1.1em;
}
ol li {
  counter-increment: li;
}
ol li::before {
  content: counter(li);
  margin: 0 0 0 -1em;
}

Bir mermiyi görüntülemek için farklı bir karakter seçtim, burada izledim . Kenar boşluğunu buna göre ayarlamam gerekiyordu, belki değerler seçtiğiniz yazı tipine uygulanmayabilir (sayılar web yazı tipinizi kullanır).

Bunun yerine şunu kullanmayı deneyin:

ul {
  color: red;
}

Satır içi sürüm, Outlook Masaüstü için çalışır:

<ul style="list-style:square;">
  <li style="color:red;"><span style="color:black;">Lorem.</span></li>
  <li style="color:red;"><span style="color:black;">Lorem.</span></li>
</ul>

JSFiddle .