목록에있는 총알의 색상을 변경하는 방법이 있는지 궁금합니다.
다음과 같은 목록이 있습니다.
<ul>
<li>House</li>
<li>Car</li>
<li>Garden</li>
</ul>
내가 'span'og a 'p'와 같은 li 's에 아무것도 삽입 할 수 없습니다. 글 머리 기호의 색상을 변경할 수 있지만 텍스트를 현명하게 변경할 수 있습니까?
답변:
이미지를 사용할 수 있으면 이렇게 할 수 있습니다. 이미지가 없으면 글 머리 기호의 색상 만 변경할 수없고 텍스트는 변경할 수 없습니다.
이미지 사용
li { list-style-image: url(images/yourimage.jpg); }
보다
이미지를 사용하지 않고
그런 다음 HTML 마크 업을 편집하고 목록 안에 범위를 포함하고 다른 색상으로 li 및 범위에 색상을 지정해야합니다.
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더 나은 잡힌 총알을 받으실 수 있습니다!)
s list-style-image와 결합 svg할 수 있습니다 . 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 스펙 되는 참조 1, URI 사양은 상기 SVG는에 따라 인코딩되어야한다고 말한다 URI 사양 . 즉, 모든 종류의 문자를 인코딩해야합니다 (예 <:) %3C.
일부 소스에서는 인코딩 문제를 해결해야하는 base64 인코딩을 제안하지만 SVG의 크기를 불필요하게 늘리는 반면 URI 인코딩은 그렇지 않습니다. URI 인코딩을 권장합니다.
<svg>코드 를 복사 / 붙여 넣기가 불가능할 수 있습니다 . 먼저 uri 인코더를 통해 실행 해보십시오.
@Marc의 솔루션 구축-글 머리 기호 문자는 다른 글꼴과 브라우저에서 다르게 렌더링되기 때문에 테두리 반경과 함께 다음 css3 기술을 사용하여 더 많은 제어 권한을 가진 글 머리 기호를 만들었습니다.
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브라우저에서 글 머리 기호의 기본 위치이기 때문에 사용했습니다 . 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;
}
또한 "content :"에 사용한 16 진수 코드가 Marc의 코드와 다르다는 것을 발견했습니다 (16 진수 원이 너무 높게 위치하는 것 같음). 내가 사용한 것은 중간에 완벽하게 앉아있는 것 같습니다. 여기에서 여러 다른 모양 (사각형, 삼각형, 원 등)도 발견 했습니다.
나에게 가장 좋은 옵션은 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를 원하면 0으로 설정할 수 있습니다.square총알 스타일을 다른 CSS 모양 사용할 수 있습니다 https://css-tricks.com/examples/ShapesOfCSS/ (예를 들어 삼각형 위해 이렇게 작업에 의사 요소를 필요로하지 않는이 선택)
::markerCSS 의사 요소를 사용하여 목록 항목 (예 : 글 머리 기호 또는 숫자)의 마커 상자를 선택할 수 있습니다.
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;
}