ฉันสงสัยว่ามีวิธีเปลี่ยนสีของสัญลักษณ์แสดงหัวข้อย่อยในรายการหรือไม่
ฉันมีรายการดังนี้:
<ul>
<li>House</li>
<li>Car</li>
<li>Garden</li>
</ul>
เป็นไปไม่ได้ที่ฉันจะใส่อะไรลงไปในตัว li เช่น 'span' og a 'p' ดังนั้นฉันสามารถเปลี่ยนสีของสัญลักษณ์แสดงหัวข้อย่อย แต่ไม่ใช่ข้อความด้วยวิธีที่ชาญฉลาดได้หรือไม่?
คำตอบ:
หากคุณสามารถใช้รูปภาพคุณสามารถทำได้ และหากไม่มีรูปภาพคุณจะไม่สามารถเปลี่ยนสีของสัญลักษณ์แสดงหัวข้อย่อยเพียงอย่างเดียวและไม่สามารถเปลี่ยนข้อความได้
การใช้รูปภาพ
li { list-style-image: url(images/yourimage.jpg); }
ดู
โดยไม่ต้องใช้รูปภาพ
จากนั้นคุณต้องแก้ไขมาร์กอัป HTML และรวมช่วงในรายการและระบายสี li และ span ด้วยสีที่ต่างกัน
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>');
ฉันจัดการสิ่งนี้โดยไม่ต้องเพิ่มมาร์กอัป แต่ใช้li:beforeไฟล์. เห็นได้ชัดว่าสิ่งนี้มีข้อ จำกัด ทั้งหมดของ:before(ไม่มีการรองรับ IE แบบเก่า) แต่ดูเหมือนว่าจะใช้งานได้กับ IE8, Firefox และ Chrome หลังจากการทดสอบบางอย่างที่ จำกัด มาก รูปแบบสัญลักษณ์แสดงหัวข้อย่อยยังถูก จำกัด ด้วยสิ่งที่อยู่ในยูนิโค้ด
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ได้รับกระสุนที่มีสัดส่วนที่ดีกว่า!)
เราสามารถรวมlist-style-imageกับsvgs ซึ่งเราสามารถอินไลน์ใน css ได้ ! วิธีนี้ช่วยให้สามารถควบคุม "กระสุน" ได้อย่างไม่น่าเชื่อซึ่งสามารถกลายเป็นอะไรก็ได้
หากต้องการรับวงกลมสีแดงให้ใช้ css ต่อไปนี้:
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>');
}
แต่นี่เป็นเพียงจุดเริ่มต้น สิ่งนี้ทำให้เราสามารถทำสิ่งที่บ้าคลั่งที่เราต้องการได้ด้วยกระสุนเหล่านั้น วงกลมหรือสี่เหลี่ยมเป็นเรื่องง่าย แต่อะไรก็ตามที่คุณวาดด้วยsvgคุณสามารถติดอยู่ในนั้นได้! ดูตัวอย่างเป้ากางเกงด้านล่าง:
บางเบราว์เซอร์ต้องการwidthและheightตั้งค่าแอตทริบิวต์<svg>หรือไม่ก็ไม่แสดงอะไรเลย ในขณะที่เขียน Firefox เวอร์ชันล่าสุดแสดงปัญหานี้ ฉันได้ตั้งค่าคุณสมบัติทั้งสองในตัวอย่างแล้ว
ความคิดเห็นล่าสุดทำให้ฉันนึกถึงการเข้ารหัสสำหรับ data-uri นี่เป็นจุดที่เจ็บปวดสำหรับฉันเมื่อไม่นานมานี้และฉันสามารถแบ่งปันข้อมูลเล็กน้อยที่ฉันค้นคว้าได้
ข้อมูลจำเพาะข้อมูล URIซึ่งอ้างอิงข้อมูลจำเพาะ URIกล่าวว่า SVG ควรได้รับการเข้ารหัสตามสเป็ค URI นั่นหมายความว่าทุกประเภทของตัวอักษรที่ควรได้รับการเข้ารหัสเช่นกลายเป็น<%3C
แหล่งข้อมูลบางแห่งแนะนำการเข้ารหัส base64 ซึ่งควรแก้ไขปัญหาการเข้ารหัสอย่างไรก็ตามจะเพิ่มขนาด SVG โดยไม่จำเป็นในขณะที่การเข้ารหัส URI จะไม่ ฉันแนะนำให้เข้ารหัส URI
<svg>โค้ด"สวย" ได้โปรดลองรันผ่านตัวเข้ารหัส uri ก่อน
การสร้างโซลูชันของ @ Marc - เนื่องจากอักขระสัญลักษณ์แสดงหัวข้อย่อยแสดงผลแตกต่างกันไปตามแบบอักษรและเบราว์เซอร์ที่แตกต่างกันฉันจึงใช้เทคนิค css3 ต่อไปนี้กับ border-radius เพื่อสร้างสัญลักษณ์แสดงหัวข้อย่อยที่ฉันสามารถควบคุมได้มากกว่า:
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;
}
ฉันรู้ว่านี่เป็นคำถามเก่า ๆ จริงๆ แต่ฉันกำลังเล่นกับสิ่งนี้และหาวิธีที่ฉันไม่เคยเห็นโพสต์ กำหนดสีให้รายการแล้วเขียนทับสีข้อความโดยใช้::first-lineตัวเลือก ฉันไม่ใช่ผู้เชี่ยวชาญดังนั้นอาจมีบางอย่างผิดปกติกับวิธีการนี้ที่ฉันขาดหายไป แต่ดูเหมือนว่าจะได้ผล
li {
color: blue;
}
li::first-line {
color: black;
}<ul>
<li>House</li>
<li>Car</li>
<li>Garden</li>
</ul>การสร้างโซลูชัน @Marc และ @jessica - นี่คือโซลูชันที่ฉันใช้:
li {
position:relative;
}
li:before {
content:'';
display: block;
position: absolute;
width: 6px;
height:6px;
border-radius:6px;
left: -20px;
top: .5em;
background-color: #000;
}
ฉันใช้emสำหรับขนาดฟอนต์ดังนั้นหากคุณกำหนดค่าของคุณtopให้เป็นค่า.5emนั้นจะถูกวางไว้ที่จุดกึ่งกลางของข้อความบรรทัดแรกเสมอ ฉันใช้left:-20pxเพราะเป็นตำแหน่งเริ่มต้นของสัญลักษณ์แสดงหัวข้อย่อยในเบราว์เซอร์: parent padding/2
ฉันชอบคำตอบของ Marc มากเช่นกัน - ฉันต้องการชุด UL สีต่างๆและเห็นได้ชัดว่าการใช้คลาสจะง่ายกว่า นี่คือสิ่งที่ฉันใช้สำหรับสีส้มเช่น:
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;
}
นอกจากนี้ฉันพบว่ารหัสฐานสิบหกที่ฉันใช้สำหรับ "เนื้อหา:" นั้นแตกต่างจากของ Marc (วงกลมเลขฐานสิบหกนั้นดูเหมือนจะสูงเกินไปเล็กน้อย) อันที่ฉันใช้ดูเหมือนจะนั่งตรงกลางพอดี ฉันยังพบรูปทรงอื่น ๆ อีกมากมาย (สี่เหลี่ยมสามเหลี่ยมวงกลม ฯลฯ ) ที่นี่
สำหรับฉันตัวเลือกที่ดีที่สุดคือการใช้องค์ประกอบหลอก CSS ดังนั้นสำหรับการdiscจัดรูปแบบสัญลักษณ์แสดงหัวข้อย่อยจะมีลักษณะดังนี้:
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>หมายเหตุ:
widthและheightควรมีค่าเท่ากันเพื่อให้พอยน์เตอร์ปัดเศษborder-radiusเป็นศูนย์หากคุณต้องการมีsquareสัญลักษณ์แสดงหัวข้อย่อยสำหรับรูปแบบสัญลักษณ์แสดงหัวข้อย่อยเพิ่มเติมคุณสามารถใช้รูปทรง css อื่น ๆhttps://css-tricks.com/examples/ShapesOfCSS/ (เลือกสิ่งนี้ที่ไม่ต้องการองค์ประกอบหลอกในการทำงานตัวอย่างเช่นสามเหลี่ยม)
คุณสามารถใช้::markerองค์ประกอบหลอก CSS เพื่อเลือกกล่องเครื่องหมายของรายการ (เช่นสัญลักษณ์แสดงหัวข้อย่อยหรือตัวเลข)
ul li::marker {
color: red;
}
หมายเหตุ:ในขณะโพสต์คำตอบนี้ถือเป็นเทคโนโลยีทดลองและมีการนำไปใช้ใน Firefox และ Safari เท่านั้น (จนถึงขณะนี้)
สร้างจากคำตอบของ @ ddilsaver ฉันต้องการที่จะใช้สไปรท์สำหรับกระสุน สิ่งนี้ดูเหมือนจะใช้ได้:
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 */
}
ฉันลองวันนี้และพิมพ์สิ่งนี้:
ฉันต้องการแสดงเครื่องหมายสีในรายการของฉัน (ทั้งสัญลักษณ์แสดงหัวข้อย่อยและตัวเลข) ฉันมาถึงเคล็ดลับนี้และเขียนไว้ในสไตล์ชีตของฉันโดยใช้คุณสมบัติร่วมกัน:
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;
}
ผมเลือกตัวละครที่แตกต่างกันเพื่อแสดงกระสุนเฝ้าดูมันนี่ ฉันจำเป็นต้องปรับระยะขอบตามลำดับบางทีค่าอาจจะใช้ไม่ได้กับแบบอักษรที่คุณเลือก (ตัวเลขใช้แบบอักษรบนเว็บของคุณ)
ลองใช้สิ่งนี้แทน:
ul {
color: red;
}