Ubah warna poin dalam daftar html?

86

Yang saya inginkan hanyalah bisa mengubah warna peluru dalam daftar menjadi abu-abu terang. Standarnya menjadi hitam, dan saya tidak tahu bagaimana mengubahnya.

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

html  css  html-lists 
— Dave Haynes
sumber
Saya hanya akan menggunakan gambar sendiri dan menghindari markup ekstra. Ini mungkin solusi yang lebih efisien
— Sam Murray-Sutton
8
Siapa yang peduli dengan markup "ekstra" seperti ini ... serius, Anda tidak akan kehilangan apa-apa dengan melakukannya.

Jawaban:

159

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

Bungkus teks daftar dalam satu 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 */
}
— Prestaul
sumber
Persis yang saya butuhkan! Saya memiliki daftar tautan dan tautan tersebut sudah memiliki gaya warna berbeda yang diterapkan padanya.
— Dave Haynes
Ini bukan cara terbaik untuk melakukan ini. Misalnya, ini tidak akan berfungsi jika Anda memiliki cms dengan editor WYSIWYG. Elemen <span> tidak akan dirender. Apa yang Anda inginkan adalah bekerja dengan: sebelum dan: sesudah dan tinggalkan bullits itu sendiri. Ini sebenarnya adalah praktik yang sangat buruk.
— Automagisch
2
@KoenHout, pada saat ini ditulis (2008) itu adalah satu-satunya teknik dengan dukungan yang masuk akal. Bahkan hari ini ini bukan praktik yang buruk dan masih merupakan teknik dengan dukungan browser terluas, meskipun saya setuju bahwa hari ini (dalam banyak kasus) saya akan memilih untuk menggunakan :beforeseperti pada jawaban Marc di bawah ini.
— Prestaul
Karena Anda hanya mengubah presentasi teks, btag akan lebih sesuai.
— Ben Leggiero
45

Saya mengelola ini tanpa menambahkan markup, tetapi menggunakan li: sebelumnya. Ini jelas memiliki semua batasan :before(tidak ada dukungan IE lama), tetapi tampaknya berfungsi dengan IE8, Firefox dan Chrome setelah beberapa pengujian yang sangat terbatas. Ini berfungsi di lingkungan pengontrol kami, bertanya-tanya apakah ada yang bisa memeriksanya. 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>
— Marc
sumber
Ini adalah cara yang lebih moern dengan CSS3, dibandingkan dengan jawaban yang diterima
— minni
17

Ini tidak mungkin pada tahun 2008, tetapi itu menjadi mungkin segera (semoga)!

Menurut spesifikasi CSS3 W3C , Anda dapat memiliki kontrol penuh atas nomor, mesin terbang, atau simbol lain yang dibuat sebelum item daftar dengan ::markerelemen semu. Untuk menerapkan ini ke 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 mulai Juli 2016 , solusi ini hanya bagian dari Draf Kerja W3C dan belum berfungsi di browser utama mana pun.

Jika Anda menginginkan fitur ini, lakukan ini:

— Ben Leggiero
sumber
6 
<ul>
  <li style="color: #888;"><span style="color: #000">test</span></li>
</ul>

masalah besar dengan metode ini adalah markup ekstra. (tag span)

— Jonathan Arkell
sumber
Karena Anda hanya mengubah presentasi teks, btag akan lebih sesuai.
— Ben Leggiero
1
Saat ini ditulis, tag b sedang tidak digunakan lagi karena tag yang kuat. Tapi ya, Anda benar, sekarang tag ab akan lebih sesuai.
— Jonathan Arkell
3

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

Ok, faktanya adalah Anda harus menentukan tag internal untuk membuat teks pertama berwarna hitam biasa (atau apa pun yang Anda inginkan). Tetapi juga benar bahwa Anda dapat MENGUBAH TAGS dan tag internal apa pun dengan CSS. Jadi cara terbaik untuk melakukan ini menggunakan tag SHORTER untuk definisi ulang

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 diinginkan. Anda juga dapat membuat warna yang berbeda untuk setiap disk:

<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>
Anda harus menggunakan <span>. juga, <b> tidak digunakan lagi.
— the_drow
2
Penghitung menunjuk ke @the_drow, <b> tidak digunakan lagi. stackoverflow.com/questions/1348683/…
— Strixy
Menyetel warna default yang diterapkan ke pemilih tertentu memperbaiki masalah saya. Terima kasih atas tip ini.
— David
2

Lakukan saja peluru dalam program grafik dan gunakan list-style-image:

ul {
  list-style-image:url('gray-bullet.gif');
}
— ghr
sumber
1
OP secara eksplisit tidak ingin menggunakan gambar, tapi saya menemukan ini mencari cara umum untuk mengganti peluru. Jadi menurut saya jawaban ini bagus untuk kelengkapan.
— Zane
Ini satu dengan lingkaran SVG, yang bisa diwarnai dengan mudah:list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ccircle cx='256' cy='256' r='256' fill='#ff0000' /%3E%3C/svg%3E");
— Ciantic
0

Bungkus teks di dalam item daftar dengan rentang (atau beberapa elemen lainnya) dan terapkan warna poin ke item daftar dan warna teks ke rentang.

0

Sesuai spesifikasi W3C ,

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

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

— Aeon
sumber
0 
<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>
0

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

berikut ini contoh sederhananya:

$("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
});
— alaasdk
sumber
0

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 ingin menggunakan pustaka eksternal, Font Awesome memberi Anda ikon vektor yang dapat diskalakan , dan ketika digabungkan dengan kelas pembantu Bootstrap (misalnya 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-uldan fa-liuntuk dengan mudah mengganti poin default dalam daftar tidak berurutan.

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

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

— seperti telur
sumber
0

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;
}
— Muhammad
sumber
-1

Anda bisa menggunakan CSS untuk mencapai ini. Dengan menentukan daftar dalam warna dan gaya pilihan Anda, Anda juga dapat menentukan teks sebagai warna berbeda.

Ikuti contoh di http://www.echoecho.com/csslists.htm .

-1 
<ul style="color: red;">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
  • Satu
  • Dua
  • Tiga
    • — NerdFury
    sumber
    -2

    Cukup gunakan CSS:

    <li style='color:#e0e0e0'>something</li>
    — Diodeus - James MacFarlane
    sumber
    Ya, itulah yang saya pikirkan juga ... tetapi gaya warna li mengubah warna teks serta poinnya.
    — Aeon
    -5

    Anda ingin menyetel "gaya daftar" melalui CSS, dan memberinya warna: nilai. Contoh:

    ul.colored {list-style: color: green;}
    — ahockley
    sumber
    Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
    Licensed under cc by-sa 3.0 with attribution required.