Cambiar el color de un elemento hr

Quiero cambiar el color de mi hretiqueta usando CSS. El código que probé a continuación no parece funcionar:

hr {
    color: #123455;
}

Creo que debería usar en border-colorlugar de color, si su intención es cambiar el color de la línea producida por la <hr>etiqueta.

Aunque, se ha señalado en los comentarios que, si cambia el tamaño de su línea, el borde seguirá siendo tan ancho como lo especificó en los estilos, y la línea se rellenará con el color predeterminado (que no es un efecto deseado la mayoría de las líneas). hora). Entonces parece que en este caso también necesitaría especificar background-color(como sugirió @Ibu en su respuesta).

El proyecto HTML 5 Boilerplate en su hoja de estilo predeterminada especifica la siguiente regla:

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

Un artículo titulado "12 hechos CSS poco conocidos" , publicado recientemente por SitePoint, menciona que <hr>puede establecerlo border-coloren sus padres colorsi lo especifica hr { border-color: inherit }.

• border-colorFunciona en Chrome y Safari .
• background-color Funciona en Firefox y Opera.
• colorfunciona en IE7 + .

Creo que esto puede ser útil. Este fue un simple selector de CSS.

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

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

Hacerlo de esta manera le permite cambiar la altura si es necesario. Buena suerte. Fuente: Cómo diseñar HR con CSS

Probado en Firefox, Opera, Internet Explorer, Chrome y Safari.

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

Ver el violín .

Solo el borde superior con color es suficiente para hacer que la línea tenga un color diferente.

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

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

Esto mantendrá la regla horizontal de 1px de grosor mientras cambia el color de la misma.

Creo que este es el enfoque más efectivo:

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

O si prefieres hacerlo en todos los elementos hr, escribe esto en tu CSS:

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

hora
{
color: # f00;
color de fondo: # f00;
altura: 5px;
}

hr
{
  background-color: #123455;
}

el fondo es el que debes intentar cambiar

También puede trabajar con el color de los bordes. No estoy seguro de que haya problemas con los navegadores cruzados con esto. deberías probarlo en diferentes navegadores

si usa la clase css, todas las etiquetas 'hr' la tomarán, pero si desea una 'hr' particular, use el código siguiente, es decir, css en línea

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

Si no funciona en Chrome, pruebe el siguiente código:

<hr color="red" />

Después de leer todas las respuestas aquí, y de ver la complejidad descrita, me puse en una pequeña diversión para experimentar con recursos humanos. Y, la conclusión es que puede tirar la mayor parte del CSS parcheado por mono que escribió, lea este pequeño manual y solo use estas dos líneas de CSS puro:

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

Eso es todo lo que necesita para diseñar sus recursos humanos.

• Funciona entre navegadores, dispositivos cruzados, sistemas operativos cruzados, canales cruzados en inglés, edades cruzadas.
• No "Creo que esto funcionará ..." , "debes tener en cuenta Safari / IE ..." , etc.
• No CSS adicional - no height, width, background-color, color, etc involucrados.

Solo HR coloridos a prueba de balas. Es que sencilla ^TM .

Bonificación: para darle al HR algo de altura H, solo configure el border-widthas H/2.

Algunos navegadores usan el coloratributo y otros usan el background-coloratributo. Para estar seguro:

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

Estoy probando en IE, Firefox y Chrome en mayo de 2015 y esto funciona mejor con las versiones actuales. Centra los recursos humanos y lo hace un 70% de ancho:

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

<hr class="light" />

Debe establecer el ancho del borde en 0; Funciona bien en Firefox y Chrome.

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

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

Es simple y mi favorito.

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

Puedes agregar bootstrap bg class como

<hr class="bg-light" />

Como no tengo reputación para comentar, daré aquí algunas ideas.

Si desea una altura variable CSS, quite todos los bordes y dé un color de fondo.

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

si desea simplemente un estilo que sepa que funcionará (ejemplo: para reemplazar un borde en un elemento :: before para la mayoría de los clientes de correo electrónico o

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

En ambos sentidos, si establece un ancho, siempre tendrá su tamaño.

No es necesario configurar display:block; esto.

Para estar totalmente seguro, puede mezclar ambos, porque algunos navegadores pueden confundirse con height:0px;:

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

Con este método, puede estar seguro de que tendrá al menos 2px de altura.

Es una línea más, pero la seguridad es seguridad.

Este es el método que debe usar para ser compatible con casi todo.

Recuerde: Gmail solo detecta CSS en línea y algunos clientes de correo electrónico pueden no admitir fondos o bordes. Si uno falla, aún tendrá una línea de 1 px. Mejor que nada.

En el peor de los casos, puede intentar agregar color:blue;.

En el peor de los peores casos, puede intentar usar una <font color="blue"></font>etiqueta y poner su preciosa <hr/>etiqueta dentro de ella. Heredará el <font></font>color de la etiqueta.

Con este método, SE querer hacer la siguiente manera: <hr width="50" align="left"/>.

Ejemplo:

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

Aquí hay un enlace para que lo revise: http://jsfiddle.net/sna2D/

Puede usar CSS para hacer una línea con un color diferente, el ejemplo sería así:

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

ese código mostrará una línea gris vertical.

Bueno, soy nuevo en HTML, CSS y Java, pero probé mi camino que funcionó para mí en todos los navegadores. He usado JS en lugar de CSS, que no funciona con algunos navegadores .

En primer lugar, le di id="myHR"al elemento HR y lo usé en Java Script.
Aquí está el código.

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. El código funciona para IE más antiguo

2. Probado para muchos colores

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

El uso de colores de fuente para modificar las reglas horizontales los hace más flexibles y fáciles de usar.

La colorpropiedad no se hereda de manera predeterminada, por lo que se debe agregar lo siguiente a las horas para permitir la herencia del color:

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

Podrías hacer esto:

hr {
  border: 1px solid red;
}

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

Puede dar la <hr noshade>etiqueta e ir a su archivo CSS y agregar:

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

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

Como regla general, no puede simplemente establecer el color de una línea horizontal con CSS como lo haría con cualquier otra cosa. En primer lugar, Internet Explorer necesita el color en su CSS para leer así:

"Color: # 123455"

Pero Opera y Mozilla necesitan el color en su CSS para leer así:

"Color de fondo: # 123455"

Por lo tanto, deberá agregar ambas opciones a su CSS.

A continuación, deberá darle a la línea horizontal algunas dimensiones o, de forma predeterminada, la altura, el ancho y el color estándar establecidos por su navegador. Aquí hay un código de muestra de cómo debería ser su CSS para obtener la línea horizontal azul.

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

O simplemente puede agregar el estilo a su página HTML directamente cuando inserte una línea horizontal, como esta:

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

Espero que esto ayude.

Hice una apuesta en cada sentido:

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