Ubah warna poin dalam daftar html?

Question 1

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.

Question 2

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

Question 3

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>

Question 4

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:

Question 5

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

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

Question 6

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>

Question 7

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

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

Question 8

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

Question 9

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!

Question 10

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

Question 11

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
});

Question 12

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 .

Question 13

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

Question 14

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 .

Question 15

<ul style="color: red;">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

Satu

Dua

Tiga

Question 16

Cukup gunakan CSS:

<li style='color:#e0e0e0'>something</li>

Question 17

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

ul.colored {list-style: color: green;}

Answer 1

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.

Answer 2

Saya hanya akan menggunakan gambar sendiri dan menghindari markup ekstra. Ini mungkin solusi yang lebih efisien

Sam Murray-Sutton

Answer 3

8

Siapa yang peduli dengan markup "ekstra" seperti ini ... serius, Anda tidak akan kehilangan apa-apa dengan melakukannya.

Answer 4

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

Answer 5

Persis yang saya butuhkan! Saya memiliki daftar tautan dan tautan tersebut sudah memiliki gaya warna berbeda yang diterapkan padanya.

Dave Haynes

Answer 6

Ini bukan cara terbaik untuk melakukan ini. Misalnya, ini tidak akan berfungsi jika Anda memiliki cms dengan editor WYSIWYG. Elemen 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

Answer 7

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

Answer 8

Karena Anda hanya mengubah presentasi teks, btag akan lebih sesuai.

Ben Leggiero

Answer 9

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>

Answer 10

Ini adalah cara yang lebih moern dengan CSS3, dibandingkan dengan jawaban yang diterima

minni

Answer 11

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:

Answer 12

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

Answer 13

Karena Anda hanya mengubah presentasi teks, btag akan lebih sesuai.

Ben Leggiero

Answer 14

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

Answer 15

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>

Answer 16

Anda harus menggunakan . juga, tidak digunakan lagi.

the_drow

Answer 17

2

Penghitung menunjuk ke @the_drow, tidak digunakan lagi. stackoverflow.com/questions/1348683/…

Strixy

Answer 18

Menyetel warna default yang diterapkan ke pemilih tertentu memperbaiki masalah saya. Terima kasih atas tip ini.

David

Answer 19

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

Answer 20

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

Answer 21

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

Answer 22

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.

sumber

Answer 23

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!

Answer 24

0

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

sumber

Answer 25

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
});

Answer 26

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 .

Answer 27

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

Answer 28

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 .

Answer 29

-1

<ul style="color: red;">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

Satu

Dua

Tiga

NerdFury
sumber

Answer 30

-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

Answer 31

Ya, itulah yang saya pikirkan juga ... tetapi gaya warna li mengubah warna teks serta poinnya.

Aeon

Answer 32

-5

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

ul.colored {list-style: color: green;}

ahockley
sumber

Ubah warna poin dalam daftar html?

Jawaban: