Tôi đã tự hỏi liệu có cách nào để thay đổi màu trên các gạch đầu dòng trong danh sách không.
Tôi có một danh sách như thế này:
<ul>
<li>House</li>
<li>Car</li>
<li>Garden</li>
</ul>
Tôi không thể chèn bất cứ thứ gì vào chữ li, chẳng hạn như 'span' og a 'p'. Vậy tôi có thể thay đổi màu của gạch đầu dòng nhưng không phải của văn bản theo một cách thông minh nào đó không?
Câu trả lời:
Nếu bạn có thể sử dụng một hình ảnh thì bạn có thể làm điều này. Và nếu không có hình ảnh, bạn sẽ không thể chỉ thay đổi màu của các dấu đầu dòng chứ không phải của văn bản.
Sử dụng một hình ảnh
li { list-style-image: url(images/yourimage.jpg); }
Xem
Không sử dụng hình ảnh
Sau đó, bạn phải chỉnh sửa đánh dấu HTML và bao gồm một khoảng bên trong danh sách và tô màu cho li và khoảng bằng các màu khác nhau.
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle fill="red" cx="5" cy="5" r="2"/></svg>');
Tôi quản lý điều này mà không thêm đánh dấu, nhưng thay vào đó sử dụng li:before. Đ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 nó dường như hoạt động với IE8, Firefox và Chrome sau một số thử nghiệm rất hạn chế. Kiểu dấu đầu dòng cũng bị giới hạn bởi những gì trong unicode.
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>font-size:1emđể có được một viên đạn tốt hơn cân đối!)
Chúng ta có thể kết hợp list-style-imagevới svgs, mà chúng ta có thể nội dòng trong css ! Phương pháp này cung cấp khả năng kiểm soát đáng kinh ngạc đối với "viên đạn", có thể trở thành bất cứ thứ gì.
Để có một vòng tròn màu đỏ, chỉ cần sử dụng css sau:
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>');
}
Nhưng điều này chỉ là khởi đầu. Điều này cho phép chúng tôi làm bất kỳ điều điên rồ nào chúng tôi muốn với những viên đạn đó. hình tròn hoặc hình chữ nhật rất dễ dàng, nhưng bất cứ thứ gì bạn có thể vẽ với svgbạn đều có thể dính vào đó! Kiểm tra ví dụ bullseye dưới đây:
Một số trình duyệt yêu cầu widthvà heightcác thuộc tính phải được đặt trên <svg>, hoặc chúng không hiển thị gì. Tại thời điểm viết bài, các phiên bản Firefox gần đây có vấn đề này. Tôi đã đặt cả hai thuộc tính trong các ví dụ.
Một nhận xét gần đây đã nhắc nhở tôi về các mã hóa cho data-uri. Đây là một điểm khó khăn đối với tôi gần đây, và tôi có thể chia sẻ một chút thông tin mà tôi đã nghiên cứu.
Thông số data-uri , tham chiếu đến thông số URI , nói rằng svg phải được mã hóa theo thông số URI . Điều đó có nghĩa là tất cả các loại ký tự phải được mã hóa, ví dụ: <trở thành %3C.
Một số nguồn đề xuất mã hóa base64, cách này sẽ khắc phục sự cố mã hóa, tuy nhiên, nó sẽ làm tăng kích thước SVG một cách không cần thiết, trong khi mã hóa URI sẽ không. Tôi khuyên bạn nên mã hóa URI.
<svg>, trước tiên hãy thử chạy mã qua bộ mã hóa uri.
Xây dựng giải pháp của @ Marc - vì ký tự dấu đầu dòng được hiển thị khác nhau với các phông chữ và trình duyệt khác nhau, tôi đã sử dụng kỹ thuật css3 sau đây với bán kính đường viền để tạo dấu đầu dòng mà tôi có nhiều quyền kiểm soát hơn:
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;
}
Tôi biết đây là một câu hỏi thực sự, thực sự, cũ nhưng tôi đã chơi với nó và nghĩ ra một cách mà tôi chưa thấy được đăng. Cung cấp màu cho danh sách và sau đó ghi đè lên màu văn bản bằng ::first-linebộ chọn. Tôi không phải là chuyên gia nên có thể có điều gì đó sai trong cách tiếp cận này mà tôi đang thiếu, nhưng nó có vẻ hiệu quả.
li {
color: blue;
}
li::first-line {
color: black;
}<ul>
<li>House</li>
<li>Car</li>
<li>Garden</li>
</ul>Xây dựng cả hai giải pháp @Marc và @jessica - Đây là giải pháp mà tôi sử dụng:
li {
position:relative;
}
li:before {
content:'';
display: block;
position: absolute;
width: 6px;
height:6px;
border-radius:6px;
left: -20px;
top: .5em;
background-color: #000;
}
Tôi sử dụng emcho các kích thước phông chữ, vì vậy nếu bạn đặt topgiá trị của mình, .5emnó sẽ luôn được đặt ở điểm giữa của dòng văn bản đầu tiên của bạn. Tôi đã sử dụng left:-20pxvì đó là vị trí mặc định của dấu đầu dòng trong trình duyệt: parent padding/2
Tôi cũng thực sự thích câu trả lời của Marc - tôi cần một bộ UL có màu khác nhau và rõ ràng là sẽ dễ dàng hơn nếu chỉ sử dụng một lớp. Đây là những gì tôi đã sử dụng cho màu cam, ví dụ:
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;
}
Thêm vào đó, tôi thấy rằng mã hex mà tôi sử dụng cho "content:" khác với mã của Marc (hình tròn hex đó có vẻ hơi quá cao). Chiếc mà tôi đã sử dụng dường như hoàn toàn ngồi ở giữa. Tôi cũng tìm thấy một số hình dạng khác (hình vuông, hình tam giác, hình tròn, v.v.) ngay tại đây
Đối với tôi, tùy chọn tốt nhất là sử dụng các phần tử giả CSS, vì vậy để disctạo kiểu dấu đầu dòng, nó sẽ trông như thế:
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>Ghi chú:
widthvà heightphải có các giá trị bằng nhau để giữ cho con trỏ được làm trònborder-radiusthành 0 nếu bạn muốn có dấu đầu dòng squaredanh sáchĐối với các kiểu dấu đầu dòng khác, bạn có thể sử dụng các hình dạng css khác https://css-tricks.com/examples/ShapesOfCSS/ (chọn kiểu này không yêu cầu phần tử giả hoạt động, ví dụ như hình tam giác)
Bạn có thể sử dụng ::markerphần tử giả CSS để chọn hộp đánh dấu của mục danh sách (tức là dấu đầu dòng hoặc số).
ul li::marker {
color: red;
}
Lưu ý: Tại thời điểm đăng câu trả lời này, đây được coi là công nghệ thử nghiệm và mới chỉ được triển khai trên Firefox và Safari (cho đến nay).
Dựa trên câu trả lời của @ ddilsaver. Tôi muốn có thể sử dụng một sprite cho viên đạn. Điều này dường như hoạt động:
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 */
}
Tôi đã thử điều này ngày hôm nay và nhập điều này:
Tôi cần hiển thị các điểm đánh dấu màu trong danh sách của mình (cả dấu đầu dòng và số). Tôi đã tìm ra mẹo này và viết trong bảng định kiểu của mình trong đó sự tương hỗ của các thuộc tính:
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;
}
Tôi đã chọn một ký tự khác để hiển thị một viên đạn, hãy xem nó tại đây . Tôi cần điều chỉnh lề một cách tích cực, có thể các giá trị sẽ không áp dụng với phông chữ bạn đã chọn (các số sử dụng webfont của bạn).
Hãy thử sử dụng cái này thay thế:
ul {
color: red;
}
Phiên bản nội tuyến, hoạt động cho Outlook Desktop:
<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 .