이미지 또는 스팬 태그를 사용하지 않고 CSS를 통해 UL/LI HTML 목록에서 Bullet 색상을 설정하는 방법
단순한 정렬되지 않은 목록을 상상해 보세요.<li>물건들이요. 자, 저는 총알들을 사각형 모양으로 정의했습니다. list-style:square;하지만 제가 색상을 설정하면.<li>가 있는 항목color: #F00;그러면 모든 것이 빨간색이 됩니다!
저는 사각형 탄환의 색상만 설정하고 싶습니다.CSS에서 탄환의 색을 정의할 수 있는 우아한 방법이 있습니까?
...스프라이트 이미지나 스팬 태그를 사용하지 않아도 됩니다!
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>
CSS
li{
list-style:square;
}
가장 일반적인 방법은 다음과 같습니다.
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding-left: 1em;
text-indent: -.7em;
}
li::before {
content: "• ";
color: red; /* or whatever color you prefer */
}<ul>
<li>Foo</li>
<li>Bar</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>JSFiddle: http://jsfiddle.net/leaverou/ytH5P/
버전 8 이상의 IE를 포함한 모든 브라우저에서 작동합니다.
얼마 전에 이 사이트를 찾았습니다. 이 대안을 시도해 보셨나요?
li{
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVQIW2NkYGD4D8RwwEi6AACaVAQBULo4sgAAAABJRU5ErkJggg==");
}
어려울 것 같지만, 여기서 자신만의 png 이미지/pattern을 만든 다음, 코드를 복사/paste하고 총알을 사용자 정의할 수 있습니다 =) 여전히 우아한가요?
편집:
다른 답변에서 @lea-verou의 생각을 따르고 외부 소스 향상이라는 철학을 적용하면 다음과 같은 또 다른 해결책을 얻게 됩니다.
- 웹 폰트 아이콘 라이브러리의 스타일시트를 머릿속에 삽입합니다. 이 경우 Font Awesome:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
- FontAwesome 치트시트(또는 다른 웹 폰트 아이콘)에서 코드를 가져옵니다.
i.e.: fa-angle-right []
마지막 부분을...이와 같은 숫자가 뒤따르고 있습니다.font-family또한:
li:before {
content: "\f105";
font-family: FontAwesome;
color: red; /* or whatever color you prefer */
margin-right: 4px;
}
끝! 이제 맞춤형 총알 팁도 있습니다 =)
CSS 3 Lists 모듈의 현재 사양은 사용자가 원하는 대로 정확히 수행할 의사 요소를 지정합니다. FF는 지원하지 않는 것으로 테스트되었습니다.::marker사파리나 오페라 둘 다 가지고 있지는 않을 겁니다물론 IE는 이를 지원하지 않습니다.
그래서 지금 이 방법을 사용하는 유일한 방법은 이미지를 사용할 수 있는 유일한 방법은list-style-image.
제 생각에 당신은 그 내용물을 포장할 수 있을 것 같습니다.li와 함께span그리고 각각의 색깔을 정할 수도 있습니다만, 제가 보기엔 좀 어색한 것 같습니다.
모든 브라우저에서 작동하는 이 문제를 간단히 해결하면 다음과 같습니다.
ul li {
color: red
}
ul li span {
color: blue;
}<ul>
<li><span>Foo</span></li>
<li><span>Bar</span></li>
<li><span>Bat</span></li>
</ul>한 가지 방법은 다음을 사용하는 것입니다.li:before와 함께content: ""이렇게 스타일링을 하고 있습니다.inline-block요소.
작동 코드 조각은 다음과 같습니다.
ul {
list-style-type: none; /* no default bullets */
}
ul li {
font-family: Arial;
font-size: 18px;
}
ul li:before { /* the custom styled bullets */
background-color: #14CCBB;
border-radius: 50%;
content: "";
display: inline-block;
margin-right: 10px;
margin-bottom: 2px;
height: 10px;
width: 10px;
}<ul>
<li>Swollen joints</li>
<li>Pain in hands and knees</li>
<li>Redness around joints</li>
<li>Constant fatigue</li>
<li>Morning stiffness in joints</li>
<li>High fevers</li>
<li>Rheumatoid nodules, which develop around joints</li>
</ul>그러나, 다른 해결책은 a를 사용하는 것입니다.:before가 있는 유사 원소border-radius: 50% 8 IE 8 이상을 포함한 모든 브라우저에서 작동합니다.
으로.emunit은 폰트 사이즈 변경에 대한 응답성을 허용합니다.jsFiddle 창 크기를 조정하여 테스트할 수 있습니다.
ul {
list-style: none;
line-height: 1em;
font-size: 3vw;
}
ul li:before {
content: "";
line-height: 1em;
width: .5em;
height: .5em;
background-color: red;
float: left;
margin: .25em .25em 0;
border-radius: 50%;
}
당신은 심지어 그것을 가지고 놀 수 있습니다.box-shadow멋진 그림자를 만들기 위해, 뭔가 어울리지 않을 것입니다.content: "• "해를 보다
이거 해봤는데 일이 이상해졌어요. (css는 일을 그만뒀어요.:after {content: "";}이 자습서의 일부.총탄에 색을 입힐 수 있다는 걸 알았어요color:#ddd;li아이템 자체
예를 들어보겠습니다.
li{
color:#ff0000;
list-style:square;
}
a {
text-decoration: none;
color:#00ff00;
}
a:hover {
background-color: #ddd;
}
이 경우 jQuery를 사용합니다.
jQuery('li').wrapInner('<span class="li_content" />');
& 몇 가지 CSS와 함께:
li { color: red; }
li span.li_content { color: black; }
CMS를 코드화하고 편집자에게 모든 목록 항목에 추가 범위를 추가하도록 요청하고 싶지 않을 경우에는 과도하게 사용할 수 있습니다.
나는 그에게 다음을 주는 것을 추천합니다.LI a background-image그리고.padding-left.list-style-image속성은 교차 browser 환경에서 플레이크하며 스판과 같은 추가 요소를 추가할 필요가 없습니다.그래서 당신의 코드는 결국 다음과 같은 모양이 됩니다.
li {
background:url(../images/bullet.png) 0 0 no-repeat;
list-style:none;
padding-left:10px;
}
당신이 할 수 있는 가장 쉬운 것은 그 내용을 포장하는 것입니다.<li>일순간에<span>또는 동등한 값을 선택하면 색상을 독립적으로 설정할 수 있습니다.
또는 원하는 블렛 컬러로 이미지를 만들어 설정할 수도 있습니다.list-style-image소유물.
다음과 같은 다중 줄 항목에서 완벽한 들여쓰기를 가진 Lea Verou 솔루션의 변형이 있을 수 있습니다.
ul{
list-style: none;
position: relative;
padding: 0;
margin: 0;
}
li{
padding-left: 1.5em;
}
li:before {
position: absolute;
content: "•";
color: red;
left: 0;
}
이 게시물에 대한 답변이 늦었다는 건 알지만 참고로...
CSS
ul {
color: red;
}
li {
color: black;
}
총알 색상은 UL 태그에 정의되어 있고 그 다음에 우리는 리 색상을 다시 전환합니다.
저는 이 문제에 제 해결책을 추가하고 있습니다.
이미지를 사용하고 싶지 않고 CSS에서 부정적인 값을 사용하면 validator에서 벌을 줄 것이기 때문에 다음과 같이 합니다.
ul { list-style:none; padding:0; margin:0; }
li { padding-left:0.75em; position:relative; }
li:before { content:"•"; color:#e60000; position:absolute; left:0em; }
Lea의 데모를 참고하면, 국경을 가진 순서 없는 목록을 만드는 또 다른 방법이 있습니다. http://jsfiddle.net/vX4K8/7/
HTML
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<ul>
<li>Son</li>
<li>Of</li>
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
</ul>
</ul>
CSS
ul {
list-style: none;
margin: 0;
}
ul:first-child {
padding: 0;
}
li {
line-height: 180%;
border-bottom: 1px dashed #CCC;
margin-left: 14px;
text-indent: -14px;
}
li:last-child {
border: none;
}
li:before {
content: "";
border-left: 4px solid #CCC;
padding-left: 10px;
}
Lea Verous 솔루션도 좋지만 총알의 위치를 좀 더 통제하고 싶었기 때문에 이것이 제 접근법입니다.
.entry ul {
list-style: none;
padding: 0;
margin: 0;
/* hide overflow in the case of floating elements around ... */
overflow: hidden;
}
.entry li {
position: relative;
padding-left: 24px;
}
.entry li:before {
/* with absolute position you can move this around or make it bigger without getting unwanted scrollbars */
position: absolute;
content: "• ";
color: #E94E24;
font-size: 30px;
left: 0;
/* use fonts like "arial" or use "sans-serif" to make the dot perfect round */
font-family: Arial, sans-serif;
}
이렇게 하면 됩니다.
li{
color: #fff;
}
언급URL : https://stackoverflow.com/questions/5306640/how-to-set-bullet-colors-in-ul-li-html-lists-via-css-without-using-any-images-or
'bestsource' 카테고리의 다른 글
| Google Maps V3 - 주어진 경계에 대한 줌 레벨을 계산하는 방법 (0) | 2023.10.26 |
|---|---|
| SQL 서버 저장 프로시저에서 삭제된 행 수 계산 (0) | 2023.10.26 |
| CORS - httprequest를 '사전 비행'하려면 어떻게 해야 합니까? (0) | 2023.10.26 |
| Android TextView : "setText로 표시된 텍스트 연결 안 함" (0) | 2023.10.26 |
| 파이썬에서 데이터베이스 연결 풀링을 위한 가장 좋은 솔루션은 무엇입니까? (0) | 2023.10.26 |