Thay đổi màu của phần tử hr

Tôi muốn thay đổi màu của hrthẻ bằng CSS. Mã tôi đã thử dưới đây dường như không hoạt động:

hr {
    color: #123455;
}

Tôi nghĩ bạn nên sử dụng border-colorthay vì color, nếu ý định của bạn là thay đổi màu của dòng được tạo bởi <hr>thẻ.

Mặc dù, đã được chỉ ra trong các nhận xét rằng, nếu bạn thay đổi kích thước của dòng, đường viền sẽ vẫn rộng như bạn đã chỉ định trong các kiểu và dòng sẽ được lấp đầy với màu mặc định (hầu hết không phải là hiệu ứng mong muốn thời gian). Vì vậy, có vẻ như trong trường hợp này, bạn cũng cần chỉ định background-color(như @Ibu đã đề xuất trong câu trả lời của anh ấy).

Dự án nồi hơi HTML 5 trong biểu định kiểu mặc định của nó chỉ định quy tắc sau:

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

Một bài viết có tiêu đề Số 12 Các sự kiện CSS ít được biết đến , được xuất bản gần đây bởi SitePoint, đề cập đến việc <hr>có thể đặt nó border-colorthành cha mẹ của nó colornếu bạn chỉ định hr { border-color: inherit }.

• border-colorhoạt động trong Chrome và Safari .
• background-color hoạt động trong Firefox và Opera.
• colorhoạt động trong IE7 + .

Tôi nghĩ rằng điều này có thể hữu ích. đây là bộ chọn CSS đơn giản.

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

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

Làm theo cách này cho phép bạn thay đổi chiều cao nếu cần. Chúc may mắn. Nguồn: Cách tạo kiểu nhân sự với CSS

Đã thử nghiệm trên Firefox, Opera, Internet Explorer, Chrome và Safari.

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

Xem Fiddle .

Chỉ viền trên cùng với màu là đủ để tạo ra các dòng có màu khác nhau.

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

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

Điều này sẽ giữ cho Quy tắc ngang 1px dày đồng thời thay đổi màu sắc của nó

Tôi tin rằng đây là cách tiếp cận hiệu quả nhất:

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

Hoặc nếu bạn thích làm điều đó trên tất cả các yếu tố hr, hãy viết điều này trên CSS của bạn:

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

giờ
{
màu: # f00;
màu nền: # f00;
chiều cao: 5px;
}

hr
{
  background-color: #123455;
}

hình nền là thứ bạn nên thử thay đổi

Bạn cũng có thể làm việc với màu viền. tôi không chắc chắn tôi nghĩ rằng có vấn đề crossbrowser với điều này. bạn nên kiểm tra nó trong các trình duyệt khác nhau

Nếu bạn sử dụng lớp css thì nó sẽ được lấy bởi tất cả các thẻ 'hr', nhưng nếu bạn muốn một 'hr' cụ thể, hãy sử dụng mã dưới đây, tức là css nội tuyến

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

Nếu nó không hoạt động trong chrome, hãy thử mã bên dưới:

<hr color="red" />

Sau khi đọc tất cả các câu trả lời ở đây và thấy sự phức tạp được mô tả, tôi bắt đầu một trò chơi nhỏ để thử nghiệm với HR. Và, kết luận là bạn có thể loại bỏ hầu hết các CSS mà bạn đã viết, đọc đoạn mồi nhỏ này và chỉ sử dụng hai dòng CSS thuần túy này:

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

Đó là TẤT CẢ bạn cần phong cách nhân sự của bạn.

• Hoạt động đa trình duyệt, thiết bị chéo, hệ thống chéo, kênh chéo tiếng Anh, nhiều lứa tuổi.
• Không "Tôi nghĩ rằng điều này sẽ hoạt động ..." , "bạn cần ghi nhớ Safari / IE ..." , v.v.
• không phải trả thêm css - không height, width, background-color, colorvv liên quan.

Chỉ cần nhân viên đầy màu sắc chống đạn. Nó mà đơn giản ^TM .

Phần thưởng: Để cung cấp cho nhân sự một số chiều cao H, chỉ cần đặt border-widthlà H/2.

Một số trình duyệt sử dụng colorthuộc tính và một số sử dụng background-colorthuộc tính. Để được an toàn:

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

Tôi đang thử nghiệm trên IE, Firefox và Chrome tháng 5 năm 2015 và điều này hoạt động tốt nhất với các phiên bản hiện tại. Nó tập trung nhân sự và làm cho nó rộng 70%:

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

<hr class="light" />

Bạn nên đặt độ rộng đường viền thành 0; Nó hoạt động tốt trong Firefox và Chrome.

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

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

Nó đơn giản và yêu thích của tôi.

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

Bạn có thể thêm lớp bst bootstrap như

<hr class="bg-light" />

Vì tôi không có tiếng tăm để bình luận, tôi sẽ đưa ra một vài ý tưởng.

Nếu bạn muốn có chiều cao thay đổi css, hãy tắt tất cả các viền và tạo màu nền.

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

nếu bạn muốn chỉ đơn giản là một kiểu mà bạn biết sẽ hoạt động (ví dụ: để thay thế một đường viền trong phần tử :: trước cho hầu hết các ứng dụng email hoặc

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

Theo cả hai cách, nếu bạn đặt chiều rộng, nó sẽ luôn có kích thước.

Không cần phải thiết lập display:block;cho điều này.

Để hoàn toàn an toàn, bạn có thể kết hợp cả hai, vì một số trình duyệt có thể bị nhầm lẫn với height:0px;:

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

Với phương pháp này, bạn có thể chắc chắn rằng nó sẽ có chiều cao tối thiểu 2px.

Đó là một dòng nhiều hơn, nhưng an toàn là an toàn.

Đây là phương pháp bạn nên sử dụng để tương thích với hầu hết mọi thứ.

Hãy nhớ rằng: Gmail chỉ phát hiện css nội tuyến và một số ứng dụng email có thể không hỗ trợ nền hoặc đường viền. Nếu thất bại, bạn vẫn sẽ có dòng 1px. Có còn hơn không.

Trong trường hợp xấu nhất, bạn có thể thử thêm color:blue;.

Trong trường hợp xấu nhất trong những trường hợp xấu nhất, bạn có thể thử sử dụng <font color="blue"></font>thẻ và đặt <hr/>thẻ quý giá của mình vào trong đó. Nó sẽ kế thừa<font></font> màu thẻ.

Với phương pháp này, bạn S do muốn làm như thế này : <hr width="50" align="left"/>.

Thí dụ:

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

Đây là một liên kết để bạn kiểm tra: http://jsfiddle.net/sna2D/

Bạn có thể sử dụng CSS để tạo một dòng có màu khác, ví dụ sẽ như sau:

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

mã đó sẽ hiển thị đường màu xám dọc.

Chà, tôi là người mới trong HTML, CSS và Java nhưng tôi đã thử cách làm việc cho tôi trong tất cả các trình duyệt. Tôi đã sử dụng JS thay vì CSS không hoạt động với một số trình duyệt .

Trước hết tôi đã đưa ra id="myHR"yếu tố nhân sự và sử dụng nó trong Java Script.
Đây là Bộ luật.

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. Mã hoạt động cho IE cũ

2. Đã thử nhiều màu sắc

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

Sử dụng màu phông chữ để sửa đổi các quy tắc ngang làm cho chúng linh hoạt hơn và dễ sử dụng.

Các colorbất động sản không được thừa kế theo mặc định, vì vậy nhu cầu sau đây để được bổ sung vào giờ để cho phép thừa kế màu sắc:

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

Bạn có thể làm điều này:

hr {
  border: 1px solid red;
}

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

Bạn có thể đưa <hr noshade>thẻ và vào tệp css của bạn và thêm:

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

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

Theo nguyên tắc chung, bạn không thể chỉ đặt màu của đường kẻ ngang bằng CSS như bất kỳ điều gì khác. Trước hết, Internet Explorer cần màu trong CSS của bạn để đọc như thế này:

Màu sắc: # 123455

Nhưng Opera và Mozilla cần màu trong CSS của bạn để đọc như thế này:

Màu nền: # 123455

Vì vậy, bạn sẽ cần thêm cả hai tùy chọn vào CSS của mình.

Tiếp theo, bạn sẽ cần cung cấp cho đường ngang một số kích thước hoặc nó sẽ mặc định theo chiều cao, chiều rộng và màu tiêu chuẩn do trình duyệt của bạn đặt. Dưới đây là một mã mẫu về CSS của bạn sẽ trông như thế nào để có được đường kẻ ngang màu xanh.

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

Hoặc bạn chỉ có thể thêm kiểu trực tiếp vào trang HTML của mình khi bạn chèn một đường ngang, như thế này:

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

Hi vọng điêu nay co ich.

Tôi đã đặt cược mỗi cách:

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