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;
}

フィドルを参照してください。

色付きのボーダートップだけで、ラインを別の色にできます。

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

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

これにより、横罫線の色が1px維持され、色も変更されます

これが最も効果的なアプローチだと思います。

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

または、すべてのhr要素でそれを実行したい場合は、CSSで次のように記述します。

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

時間
{
色：＃f00;
背景色：＃f00;
高さ：5px;
}

hr
{
  background-color: #123455;
}

背景は変更しようとするものです

境界線の色を操作することもできます。これにはクロスブラウザの問題があると思います。別のブラウザでテストする必要があります

cssクラスを使用する場合は、すべての「hr」タグによって取得されますが、特定の「hr」が必要な場合は、以下のコード、つまりインラインcssを使用します

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

クロームで動作しない場合は、以下のコードを試してください：

<hr color="red" />

ここですべての回答を読み、説明されている複雑さを確認した後、私はHRを試すために小さな転用を開始しました。そして、結論は、あなたが書いたモンキーパッチされたCSSのほとんどを捨て、この小さな入門書を読んで、次の2行の純粋なCSSを使用するだけでよいということです。

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

つまりALLあなたのスタイルにあなたのHRを必要としています。

• クロスブラウザ、クロスデバイス、クロスOS、クロス英語チャネル、クロスエイジで動作します。
• いいえ、「これでうまくいくと思います...」、「Safari / IEを覚えておく必要があります...」など
• 余分なCSS -いいえheight、width、background-color、color、などの関与。

防弾カラフルなHR。それは単純な^TMです。

おまけ：HRの高さを上げるにはH、をに設定border-widthしH/2ます。

一部のブラウザーはcolor属性を使用し、一部のブラウザーは属性を使用しbackground-colorます。安全であるために：

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

2015年5月にIE、Firefox、Chromeでテストしていますが、これは現在のバージョンで最適に動作します。HRを中央に配置し、70％の幅にします。

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

<hr class="light" />

border-widthを0に設定する必要があります。FirefoxとChromeでうまく機能します。

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

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

シンプルで私のお気に入りです。

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

あなたはのようなブートストラップbgクラスを追加することができます

<hr class="bg-light" />

私はコメントする評判がないので、ここでいくつかのアイデアを挙げます。

css変数の高さが必要な場合は、すべての境界線を外して背景色を指定します。

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

機能することがわかっているスタイルだけが必要な場合（例：ほとんどの電子メールクライアントの:: before要素のボーダーを置き換える、または

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

どちらの方法でも、幅を設定すると、常にそのサイズになります。

display:block;これを設定する必要はありません。

完全に安全にするために、両方を混在させることができます。これは、一部のブラウザが以下と混同される可能性があるためheight:0px;です。

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

この方法を使用すると、高さが少なくとも2pxになることが保証されます。

もっとラインですが、安全は安全です。

これは、ほぼすべてと互換性を保つために使用する方法です。

注意：GmailはインラインCSSのみを検出し、一部のメールクライアントは背景や境界線をサポートしない場合があります。1つが失敗した場合でも、1pxの行があります。何もないよりマシ。

最悪の場合は、を追加してみてくださいcolor:blue;。

最悪のケースでは、<font color="blue"></font>タグを使用して、<hr/>その中に貴重なタグを入れることができます。<font></font>タグの色を継承します。

この方法では、WILL、このようにやりたいです：<hr width="50" align="left"/>。

例：

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

ここにあなたがチェックするためのリンクがあります：http : //jsfiddle.net/sna2D/

CSSを使用して、別の色で線を作成できます。例は次のようになります。

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);

そのコードは灰色の縦線を表示します。

まあ、私はHTML、CSS、Javaの初心者ですが、すべてのブラウザーで機能する方法を試しました。一部のブラウザでは動作しない CSSの代わりにJSを使用しました。

まず最初に、id="myHR"HR要素を指定し、それをJavaスクリプトで使用しました。
これがコードです。

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. コードは古いIEで動作します

2. 多くの色を試しました

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

フォントの色を使用して水平方向の罫線を変更すると、より柔軟で使いやすくなります。

このcolorプロパティはデフォルトでは継承されないため、色の継承を可能にするには、次のものをhrに追加する必要があります。

/* 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">

あなたはこれを行うことができます：

hr {
  border: 1px solid red;
}

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

あなたは<hr noshade>タグを付けてCSSファイルに行き、追加することができます：

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

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

一般的なルールとして、他の場合と同じように、CSSで水平線の色を設定することはできません。まず、Internet Explorerでは、CSSの色を次のように読み取る必要があります。

「色：＃123455」

しかし、OperaとMozillaでは、CSSの色を次のように読み取る必要があります。

「背景色：＃123455」

したがって、CSSに両方のオプションを追加する必要があります。

次に、水平線にいくつかの寸法を指定する必要があります。そうしないと、デフォルトでブラウザによって設定された標準の高さ、幅、色に設定されます。青い水平線を取得するためのCSSのサンプルコードを次に示します。

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

または、次のように、水平線を挿入するときに、HTMLページにスタイルを直接追加することもできます。

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

お役に立てれば。

私はそれぞれの方法で賭けをしました：

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