hr 요소의 색상 변경

hr 요소의 색상 변경

---

hrCSS를 사용하여 태그 의 색상을 변경하고 싶습니다 . 아래에서 시도한 코드가 작동하지 않는 것 같습니다.

hr {
    color: #123455;
}

---

태그에 의해 생성 된 선의 색상을 변경하려는 의도라면을 border-color대신 사용하는 것이 좋습니다 .color<hr>

그러나 선의 크기를 변경하면 테두리는 스타일에서 지정한만큼 넓고 선은 기본 색상으로 채워집니다 (대부분의 원하는 효과는 아닙니다). 시각). 따라서이 경우 background-color@Ibu가 답변에서 제안한 것처럼 지정해야 할 것 같습니다 .

기본 스타일 시트의 HTML 5 상용구 프로젝트 는 다음 규칙을 지정 합니다.

hr { display: block; height: 1px;
    border: 0; border-top: 1px solid #ccc;
    margin: 1em 0; padding: 0; }

SitePoint에서 최근에 게시 한 "12 Little-Known CSS Facts" 라는 제목 의 기사 는를 지정하면 해당 항목을 상위 항목으로 <hr>설정할 수 있다고 언급합니다 .border-colorcolorhr { border-color: inherit }

---

• border-colorChrome 및 Safari 에서 작동합니다 .
• background-color Firefox 및 Opera에서 작동합니다.
• colorIE7 + 에서 작동합니다 .

---

이것이 유용 할 수 있다고 생각합니다. 이것은 간단한 CSS 선택자였습니다.

hr { background-color: red; height: 1px; border: 0; }

---

hr {
    height: 1px;
    color: #123455;
    background-color: #123455;
    border: none;
}

이렇게하면 필요한 경우 높이를 변경할 수 있습니다. 행운을 빕니다. 출처 : CSS로 HR 스타일을 지정하는 방법

---

Firefox, Opera, Internet Explorer, Chrome 및 Safari에서 테스트되었습니다.

hr {
    border-top: 1px solid red;
}

Fiddle을 참조하십시오 .

---

색상이있는 경계선 만 다른 색상으로 선을 만들기에 충분합니다.

hr {
    border-top: 1px solid #ccc;
}

---

hr {
  height:0; 
  border:0; 
  border-top:1px solid #083972; 
}

이렇게하면 수평 규칙의 두께가 1px로 유지되고 색상도 변경됩니다.

---

시간
{
색상 : # f00;
배경색 : # f00;
높이 : 5px;
}

---

이것이 가장 효과적인 방법이라고 생각합니다.

<hr style="border-top: 1px solid #ccc; background: transparent;">

또는 모든 hr 요소에서 수행하는 것을 선호한다면 CSS에 다음을 작성하십시오.

hr {
    background-color: transparent;
    border-top: 1px solid #ccc;
}

---

여기에서 모든 답변을 읽고 설명 된 복잡성을 확인한 후 HR 실험을 위해 약간의 전환을 시작했습니다. 그리고 결론은 여러분이 작성한 원숭이 패치 CSS의 대부분을 버리고이 작은 입문서를 읽고 다음 두 줄의 순수한 CSS를 사용할 수 있다는 것입니다.

hr {
  border-style: solid;
  border-color: cornflowerblue; /* or whatever */
}

즉 모든 당신의 스타일에 홈런이 필요합니다.

• 교차 브라우저, 교차 장치, 교차 OS, 교차 영어 채널, 교차 연령에서 작동합니다.
• 아니오 "이것이 작동 할 것 같습니다 ..." , "Safari / IE를 염두에 두어야합니다 ..." 등.
• no extra css - no height, width, background-color, color, etc. involved.

Just bulletproof colourful HRs. It's that simple^TM.

---

Bonus: To give the HR some height H, just set the border-width as H/2.

---

hr
{
  background-color: #123455;
}

the background is the one you should try to change

You can also work with the borders color. i am not sure i think there are crossbrowser issues with this. you should test it in differrent browsers

---

if u use css class then it will be taken by all 'hr' tags , but if u want for a particular 'hr' use the below code i.e, inline css

<hr style="color:#99CC99" />

if it's not working in chrome try below code:

<hr color="red" />

---

Some browsers use the color attribute and some use the background-color attribute. To be safe:

hr{
    color: #color;
    background-color: #color;
}

---

I'm testing on IE, Firefox and Chrome May 2015 and this works best with the current versions. It centers the HR and makes it 70% wide:

hr.light { 
    width:70%; 
    margin:0 auto; 
    border:0px none white; 
    border-top:1px solid lightgrey; 
}

<hr class="light" />

---

You should set border-width to 0; It works well in Firefox and Chrome.

hr {
  clear: both;
  color: red;
  background-color: red;
  height: 1px;
  border-width: 0;
}

<hr />
This is a test
<hr />

---

It's simple and my favorite.

<hr style="background-color: #dd3333" />

---

Since i don't have reputation to comment, i will give here a few ideas.

if you want a css variable height, take off all borders and give a background color.

    hr{
        height:2px;
        border:0px;
        background:green;
        margin:0px;/*sometimes useful*/
    }
    /*Doesn't work in ie7 and below and in Quirks Mode*/

if you want simply a style that you know that will work (example: to replace a border in a ::before element for most email clients or

    hr{
        height:0px;
        border:0px;
        border-top:2px solid blue;
        margin:0px;/*useful sometimes*/
    }

In both ways, if you set a width, it will always have it's size.

No need to set display:block; for this.

To be totally safe, you can mix both, 'cause some browsers can get confused with height:0px;:

    hr{
        height:1px;
        border:0px;
        background:blue;
        border-top:1px solid blue;
        margin:0px;/*useful sometimes*/
    }

With this method you can be sure that it will have at least 2px in height.

It's a line more, but safety is safety.

This is the method you should use to be compatible with almost everything.

Remember: Gmail only detects inline css and some email clients may not support backgrounds or borders. If one fails, you will still have a 1px line. Better than nothing.

In the worst cases, you can try to add color:blue;.

In the worst of the worst cases, you can try to use a <font color="blue"></font> tag and put your precious <hr/> tag inside it. It will inherit the <font></font> tag color.

With this method, you WILL want to do like this: <hr width="50" align="left"/>.

Example:

    <span>
        awhieugfrafgtgtfhjjygfjyjg
        <font color="#42B3E5"><hr width="50" align="left"/></font>
    </span>
    <!--Doesn't work in ie7 and below and in Quirks Mode-->

Here is a link for you to check: http://jsfiddle.net/sna2D/

---

You can use CSS to make a line with a different color, example would be like that:

border-left: 1px solid rgb(216, 216, 216);
border-right: medium none;
border-width: medium medium medium 2px;
border-style: none none none solid;
border-color: -moz-use-text-color -moz-use-text-color -moz-use-text-color rgb(216, 216, 216);

that code will display vertical grey line.

---

Well, I am new in HTML, CSS and in Java but I tried my way which worked for me in all browsers. I have used JS instead of CSS which doesn't work with some browsers.

First of all I have given id="myHR" to HR element and used it in Java Script.
Here is the Code.

x = document.getElementById("myHR");
y = x.style.width = "600px";
y = x.style.color = "white";
y = x.style.height = "2px";
y = x.style.border = "none";
y = x.style.backgroundColor = "lightgrey";

---

1. Code Works For older IE

2. Tried For Many Colors

   <hr color="black">
   <hr color="blue">
   

---

Using font colours to modify horizontal rules makes them more flexible and easy to use.

The color property isn't inherited by default, so the following needs to be added to hr's to allow color inheritance:

/* allow hr to inherit color */
hr { border: 1px solid;}

/* reusable colour modifier */
.fc_-alpha { color: crimson;}

normal hr:

<hr>

hr with <span class="fc_-alpha">colour modifier</span>:

<hr class="fc_-alpha">

---

You could do this :

hr {
  border: 1px solid red;
}

<hr />
This s a test
<hr />

---

You can give the <hr noshade> tag and go to your css file and add :

hr {
    border-top:0;
    color: #123455;
}

<hr noshade />
This s a test
<hr noshade />

---

As a general rule, you can’t just set the color of a horizontal line with CSS like you would anything else. First of all, Internet Explorer needs the color in your CSS to read like this:

“color: #123455”

But Opera and Mozilla needs the color in your CSS to read like this:

“background-color: #123455”

So, you will need to add both options to your CSS.

Next, you will need to give the horizontal line some dimensions or it will default to the standard height, width and color set by your browser. Here is a sample code of what your CSS should look like to get the blue horizontal line.

hr {
border: 0;
width: 100%;
color: #123455;
background-color: #123455;
height: 5px;
}

Or you could just add the style to your HTML page directly when you insert a horizontal line, like this:

<hr style="background:#123455" />

Hope this helps.

---

I took a bet each way:

  hr {
    border-top: 1px solid purple;
    border-color: purple;
    background-color: purple;
    color: purple;
  }

---

You can use font tag too For eg

<font color="red"><hr></font>

참고URL : https://stackoverflow.com/questions/6382023/changing-the-color-of-an-hr-element