it-swarm-vi.tech

Có cách nào dễ dàng để thay đổi màu của viên đạn trong danh sách không?

Tất cả những gì tôi muốn là có thể thay đổi màu của viên đạn trong danh sách thành màu xám nhạt. Nó mặc định là màu đen và tôi không thể tìm ra cách thay đổi nó.

Tôi biết tôi chỉ có thể sử dụng một hình ảnh; Tôi không muốn làm điều đó nếu tôi có thể giúp nó.

81
Dave Haynes

Viên đạn được màu của nó từ văn bản. Vì vậy, nếu bạn muốn có một dấu đầu dòng màu khác với văn bản trong danh sách của mình, bạn sẽ phải thêm một số đánh dấu.

Gói văn bản danh sách trong một khoảng:

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

Sau đó sửa đổi quy tắc phong cách của bạn một chút:

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

Tôi đã quản lý điều này mà không cần thêm đánh dấu, nhưng thay vào đó sử dụng li: trước. Điều này rõ ràng có tất cả các hạn chế của :before (không hỗ trợ IE cũ), nhưng dường như nó hoạt động với IE8, Firefox và Chrome sau một số thử nghiệm rất hạn chế. Nó hoạt động trong môi trường điều khiển của chúng tôi, tự hỏi liệu có ai có thể kiểm tra điều này không. Kiểu đạn cũng bị giới hạn bởi những gì trong 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

Điều này là không thể vào năm 2008, nhưng nó sẽ sớm trở thành có thể (hy vọng)!

Theo Đặc tả W3C CSS3 , bạn có thể có toàn quyền kiểm soát bất kỳ số, glyph hoặc biểu tượng nào khác được tạo trước một mục danh sách với phần tử giả ::marker .

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

Ví dụ về JSFiddle

Tuy nhiên, xin lưu ý rằng kể từ tháng 7 năm 2016, giải pháp này chỉ là một phần của Dự thảo làm việc của W3C và chưa hoạt động trong bất kỳ trình duyệt chính nào.

Nếu bạn muốn tính năng này, hãy làm như sau:

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

vấn đề lớn với phương pháp này là đánh dấu thêm. (thẻ span)

5
Jonathan Arkell

Chỉ cần thực hiện một dấu đầu dòng trong một chương trình đồ họa và sử dụng list-style-image:

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

Xin chào có thể câu trả lời này là muộn nhưng là câu trả lời đúng để đạt được điều này.

Ok thực tế là bạn phải chỉ định một thẻ nội bộ để làm cho văn bản LIst có màu đen thông thường (hoặc những gì bạn muốn nhận nó). Nhưng cũng đúng là bạn có thể GIẢM GIÁ bất kỳ TAG và thẻ nội bộ nào bằng CSS. Vì vậy, cách tốt nhất để làm điều này là sử dụng thẻ SHORTER để xác định lại

Sử dụng định nghĩa CSS này:

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

Và mã html này:

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

Bạn nhận được kết quả cần thiết. Ngoài ra, bạn có thể làm cho mỗi đĩa màu khác nhau:

<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

Bọc văn bản trong mục danh sách bằng một khoảng (hoặc một số phần tử khác) và áp dụng màu dấu đầu dòng cho mục danh sách và màu văn bản cho khoảng đó.

0
user4903

Nó cũng hoạt động tốt nếu chúng ta đặt màu cho từng thành phần, ví dụ: Tôi đã thêm một số Margin vào bên trái.

<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

Theo thông số W3C

Các thuộc tính danh sách ... không cho phép tác giả chỉ định kiểu khác biệt (màu sắc, phông chữ, căn chỉnh, v.v.) cho điểm đánh dấu danh sách ...

Nhưng ý tưởng với một khoảng trong danh sách trên sẽ hoạt động tốt!

0
Aeon

Bạn có thể sử dụng Jquery nếu bạn có nhiều trang và không cần phải tự chỉnh sửa đánh dấu.

đây là một ví dụ đơn giản:

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

Đối với một câu hỏi năm 2008, tôi nghĩ rằng tôi có thể thêm một câu trả lời gần đây và cập nhật hơn về cách bạn có thể thay đổi màu sắc của viên đạn trong danh sách.

Nếu bạn sẵn sàng sử dụng các thư viện bên ngoài, Font Awesome cung cấp cho bạn các biểu tượng vectơ có thể mở rộng và khi được kết hợp với Các lớp trợ giúp của Bootstrap (ví dụ: text-success), bạn có thể tạo một số danh sách khá thú vị và có thể tùy chỉnh.

Tôi đã mở rộng trên trích xuất từ ​​ trang ví dụ về danh sách Phông chữ Tuyệt vời bên dưới:

Sử dụng fa-ulfa-li để dễ dàng thay thế các viên đạn mặc định trong danh sách không có thứ tự.

<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 (chủ yếu) hỗ trợ IE8 và chỉ hỗ trợ IE7 nếu bạn sử dụng phiên bản cũ hơn 3.2.1 .

0
eggy