it-swarm-id.com

Apakah ada cara mudah untuk mengubah warna peluru dalam daftar?

Yang saya inginkan adalah dapat mengubah warna peluru dalam daftar menjadi abu-abu muda. Secara default menjadi hitam, dan saya tidak tahu cara mengubahnya.

Saya tahu saya hanya bisa menggunakan gambar; Saya lebih suka tidak melakukan itu jika saya bisa membantu.

81
Dave Haynes

Peluru mendapatkan warnanya dari teks. Jadi jika Anda ingin memiliki warna yang berbeda dari teks dalam daftar Anda, Anda harus menambahkan beberapa markup.

Bungkus teks daftar dalam rentang:

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

Kemudian, ubah sedikit aturan gaya Anda:

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

Saya mengelola ini tanpa menambahkan markup, tetapi menggunakan li: sebelumnya. Ini jelas memiliki semua keterbatasan :before (tidak ada dukungan IE lama), tetapi tampaknya bekerja dengan IE8, Firefox dan Chrome setelah beberapa pengujian yang sangat terbatas. Ini bekerja di lingkungan pengontrol kami, bertanya-tanya apakah ada yang bisa memeriksa ini. Gaya peluru juga dibatasi oleh apa yang ada di 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

Ini tidak mungkin di tahun 2008, tapi itu menjadi mungkin segera (semoga)!

Menurut Spesifikasi W3C CSS3 , Anda dapat memiliki kontrol penuh atas angka, mesin terbang, atau simbol lain yang dihasilkan sebelum item daftar dengan ::marker pseudo-element . Untuk menerapkan ini pada solusi jawaban yang paling banyak dipilih:

<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 */
}

Contoh JSFiddle

Namun, perhatikan bahwa pada Juli 2016, solusi ini hanya merupakan bagian dari W3C Working Draft dan belum berfungsi di browser utama mana pun.

Jika Anda menginginkan fitur ini, lakukan ini:

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

masalah besar dengan metode ini adalah penambahan markup. (tag rentang)

5
Jonathan Arkell

Lakukan saja peluru di program grafis dan gunakan list-style-image:

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

Halo mungkin jawaban ini terlambat tetapi jawaban yang benar untuk mencapai ini.

Ok faktanya adalah bahwa Anda harus menentukan tag internal untuk membuat teks LIst menjadi hitam biasa (atau apa pun yang Anda inginkan) Tetapi juga benar bahwa Anda dapat MENGEMBANGKAN kembali TAG dan tag internal apa pun dengan CSS. Jadi cara terbaik untuk melakukan ini menggunakan tag SHORTER untuk redefinisi

Gunakan definisi CSS ini:

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

Dan kode html ini:

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

Anda mendapatkan hasil yang diminta. Anda juga dapat membuat setiap warna disk berbeda:

<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

Bungkus teks dalam item daftar dengan rentang (atau elemen lain) dan terapkan warna bullet ke item daftar dan warna teks ke rentang.

0
user4903

Ini berfungsi juga jika kita mengatur warna untuk setiap elemen misalnya: Saya menambahkan beberapa Margin ke kiri sekarang.

<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

Sesuai spesifikasi W3C

Properti daftar ... tidak memungkinkan penulis untuk menentukan gaya yang berbeda (warna, font, perataan, dll.) Untuk penanda daftar ...

Tetapi gagasan dengan rentang di dalam daftar di atas seharusnya bekerja dengan baik!

0
Aeon

Anda dapat menggunakan Jquery jika Anda memiliki banyak halaman dan tidak perlu pergi dan mengedit markup Anda sendiri.

di sini adalah contoh sederhana:

$("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

Untuk pertanyaan 2008, saya pikir saya mungkin menambahkan jawaban yang lebih baru dan terkini tentang bagaimana Anda bisa mengubah warna peluru dalam daftar.

Jika Anda bersedia menggunakan perpustakaan eksternal, Font Awesome memberi Anda ikon vektor yang dapat diskalakan , dan ketika dikombinasikan dengan kelas pembantu Bootstrap (mis. text-success), Anda dapat membuat beberapa daftar yang cukup keren dan dapat disesuaikan.

Saya telah memperluas ekstrak dari halaman contoh daftar Font Awesome di bawah ini:

Gunakan fa-ul dan fa-li untuk dengan mudah mengganti peluru standar dalam daftar yang tidak diurutkan.

<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>

Font Awesome (kebanyakan) mendukung IE8 , dan hanya mendukung IE7 jika Anda menggunakan versi yang lebih lama 3.2.1 .

0
eggy