Mengubah warna elemen jam

Saya ingin mengubah warna hrtag saya menggunakan CSS. Kode yang saya coba di bawah ini sepertinya tidak berfungsi:

hr {
    color: #123455;
}

Saya pikir Anda harus menggunakan border-coloralih-alih color, jika niat Anda adalah mengubah warna garis yang dihasilkan oleh <hr>tag.

Meskipun, telah ditunjukkan dalam komentar bahwa, jika Anda mengubah ukuran garis Anda, batas masih akan selebar yang Anda tentukan dalam gaya, dan garis akan diisi dengan warna default (yang bukan efek yang diinginkan sebagian besar waktu). Jadi sepertinya dalam hal ini Anda juga perlu menentukan background-color(seperti yang disarankan oleh @Ibu dalam jawabannya).

Proyek HTML 5 Boilerplate dalam stylesheet standarnya menetapkan aturan berikut:

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

Sebuah artikel berjudul "12 Fakta CSS Yang Tidak Diketahui" , yang diterbitkan baru-baru ini oleh SitePoint, menyebutkan yang <hr>dapat mengaturnya border-colorkepada orang tuanya colorjika Anda tentukan hr { border-color: inherit }.

• border-colorberfungsi di Chrome dan Safari .
• background-color berfungsi di Firefox dan Opera.
• colorbekerja di IE7 + .

Saya pikir ini bisa bermanfaat. ini adalah pemilih CSS sederhana.

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

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

Melakukannya dengan cara ini memungkinkan Anda untuk mengubah ketinggian jika diperlukan. Semoga berhasil. Sumber: Cara Gaya HR dengan CSS

Diuji di Firefox, Opera, Internet Explorer, Chrome dan Safari.

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

Lihat biola .

Hanya border-top dengan warna yang cukup untuk membuat garis dalam warna berbeda.

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

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

Ini akan menjaga Horisontal Aturan 1px sementara juga mengubah warnanya

Saya percaya ini adalah pendekatan yang paling efektif:

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

Atau jika Anda lebih suka melakukannya pada semua elemen jam tulis ini di CSS Anda:

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

jam
{
warna: # f00;
warna latar: # f00;
tinggi: 5px;
}

hr
{
  background-color: #123455;
}

latar belakang adalah yang harus Anda coba ubah

Anda juga dapat bekerja dengan warna batas. Saya tidak yakin saya pikir ada masalah crossbrowser dengan ini. Anda harus mengujinya di browser yang berbeda

jika Anda menggunakan kelas css maka akan diambil oleh semua tag 'jam', tetapi jika Anda ingin 'jam' tertentu gunakan kode di bawah ini yaitu, inline css

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

jika tidak bekerja di chrome coba kode di bawah ini:

<hr color="red" />

Setelah membaca semua jawaban di sini, dan melihat kerumitan yang dijelaskan, saya menetapkan pengalihan kecil untuk bereksperimen dengan SDM. Dan, kesimpulannya adalah Anda dapat membuang sebagian besar CSS monkeypatch yang Anda tulis, baca primer kecil ini dan gunakan saja dua baris CSS murni ini:

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

Itu SEMUA yang Anda butuhkan untuk menata SDM Anda.

• Bekerja lintas-browser, lintas-perangkat, lintas-os, lintas-bahasa-Inggris, lintas-usia.
• Tidak, "Saya pikir ini akan berhasil ..." , "Anda harus mengingat Safari / IE ..." , dll.
• tidak ada tambahan css - tidak ada height, width, background-color, color, dll yang terlibat.

Hanya HR berwarna-warni antipeluru. Ini yang sederhana ^TM .

Bonus: Untuk memberi HR ketinggian H, cukup atur border-widthas H/2.

Beberapa browser menggunakan coloratribut dan beberapa menggunakan background-coloratribut. Supaya aman:

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

Saya menguji pada IE, Firefox dan Chrome Mei 2015 dan ini bekerja paling baik dengan versi saat ini. Ini pusat SDM dan membuatnya 70% lebar:

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

<hr class="light" />

Anda harus mengatur lebar batas ke 0; Ini bekerja dengan baik di Firefox dan Chrome.

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

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

Sederhana dan favorit saya.

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

Anda dapat menambahkan kelas bootstrap bg seperti

<hr class="bg-light" />

Karena saya tidak memiliki reputasi untuk berkomentar, saya akan memberikan beberapa ide di sini.

jika Anda menginginkan tinggi variabel css, lepas semua batas dan beri warna latar belakang.

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

jika Anda ingin hanya gaya yang Anda tahu itu akan berfungsi (contoh: untuk mengganti perbatasan dalam elemen :: sebelum untuk sebagian besar klien email atau

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

Dalam kedua cara, jika Anda menetapkan lebar, itu akan selalu memiliki ukurannya.

Tidak perlu diatur display:block;untuk ini.

Agar benar-benar aman, Anda dapat mencampur keduanya, karena beberapa browser dapat menjadi bingung dengan height:0px;:

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

Dengan metode ini, Anda dapat yakin bahwa tingginya setidaknya 2px.

Itu garis lebih, tetapi keselamatan adalah keamanan.

Ini adalah metode yang harus Anda gunakan agar kompatibel dengan hampir semua hal.

Ingat: Gmail hanya mendeteksi inline css dan beberapa klien email mungkin tidak mendukung latar belakang atau batas. Jika salah satu gagal, Anda masih memiliki garis 1px. Lebih baik daripada tidak.

Dalam kasus terburuk, Anda dapat mencoba menambahkan color:blue;.

Dalam kasus terburuk, Anda dapat mencoba menggunakan <font color="blue"></font>tag dan menaruh <hr/>tag berharga Anda di dalamnya. Ini akan mewarisi <font></font>warna tag.

Dengan metode ini, Anda AKAN ingin melakukan seperti ini:<hr width="50" align="left"/> .

Contoh:

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

Berikut ini tautan untuk Anda periksa: http://jsfiddle.net/sna2D/

Anda dapat menggunakan CSS untuk membuat garis dengan warna berbeda, contohnya akan seperti itu:

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

kode itu akan menampilkan garis abu-abu vertikal.

Yah, saya baru di HTML, CSS dan di Java tapi saya mencoba cara saya yang bekerja untuk saya di semua browser. Saya telah menggunakan JS alih-alih CSS yang tidak berfungsi dengan beberapa browser .

Pertama-tama saya berikan id="myHR"kepada elemen SDM dan menggunakannya dalam Java Script.
Ini Kodenya.

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. Kode Bekerja Untuk IE yang lebih lama

2. Mencoba Banyak Warna

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

Menggunakan warna font untuk mengubah aturan horizontal membuatnya lebih fleksibel dan mudah digunakan.

The colorproperti tidak diwariskan secara default, sehingga kebutuhan berikut yang akan ditambahkan ke hr untuk memungkinkan warisan warna:

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

Anda bisa melakukan ini:

hr {
  border: 1px solid red;
}

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

Anda dapat memberikan <hr noshade>tag dan pergi ke file css Anda dan menambahkan:

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

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

Sebagai aturan umum, Anda tidak bisa hanya mengatur warna garis horizontal dengan CSS seperti Anda melakukan hal lain. Pertama-tama, Internet Explorer perlu warna dalam CSS Anda untuk dibaca seperti ini:

"Warna: # 123455"

Tetapi Opera dan Mozilla membutuhkan warna dalam CSS Anda untuk membaca seperti ini:

"Warna latar: # 123455"

Jadi, Anda perlu menambahkan kedua opsi ke CSS Anda.

Selanjutnya, Anda perlu memberikan garis horizontal beberapa dimensi atau itu akan default ke ketinggian standar, lebar dan warna yang ditetapkan oleh browser Anda. Berikut adalah contoh kode tampilan CSS Anda untuk mendapatkan garis horizontal biru.

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

Atau Anda bisa menambahkan gaya ke halaman HTML Anda secara langsung ketika Anda memasukkan garis horizontal, seperti ini:

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

Semoga ini membantu.

Saya bertaruh setiap jalan:

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