26 Pregunta: Cambiando el color de un elemento hr

pregunta creada en Fri, Dec 28, 2018 12:00 AM

Quiero cambiar el color de mi etiqueta hr usando CSS. El código que he probado a continuación no parece funcionar:

 
hr {
    color: #123455;
}
    
722
  1. Solo para tu información, intenté hacer lo que hiciste con un color diferente y funciona en Firefox 5 Beta, pero no en IE 9, jsfiddle.net/TGtSd
    2011-06-17 06: 19: 41Z
  2. @ Keoki Zee No funciona para mí (Chrome).
    2011-06-17 06: 21: 16Z
  3. @ El color de fondo de Marty funciona en Chrome, pero tienes razón, no de color ... extraño ...
    2011-06-17 06: 23: 07Z
  4. Chrome no funciona, el color de fondo tampoco funciona para mí
    2011-06-17 06: 29: 37Z
  5. Bien, en caso de que alguien quiera probar, aquí hay un violín que tengo hasta ahora, jsfiddle.net/TGtSd/9 ...
    2011-06-17 06: 32: 41Z
26 Respuestas                              26                         

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

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 especificó en los estilos, y la línea se rellenará con el color predeterminado (que no es un efecto deseado). la mayor parte del tiempo). Así que parece que en este caso también deberías especificar background-color (como @Ibu sugirió 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 Poco conocido CSS Facts ", publicado recientemente por SitePoint, menciona que <hr> puede establecer su border-color en el color de sus padres si especifica hr { border-color: inherit }.

    
1073
2019-04-13 10: 32: 15Z
  1. El problema con border-color es que si aumentas la hora, solo colorea el borde, jsfiddle.net/TGtSd/9 ...
    2011-06-17 06: 31: 22Z
  2. Wow, gotcha. Borraré la respuesta inútil en un minuto. Muchos de ellos nunca pensaron en ese color de < hr > podría ser un problema EDITAR: está bien, la respuesta parece ser útil para el OP, genial =)
    2011-06-17 06: 37: 04Z
  3. @ Anton, a eso no me refiero sobre el tamaño de la hora ... si aumentas la altura y solo usas el color del borde, obtenga un rectángulo con un borde de color, pero el interior no estará coloreado ...
    2011-06-17 06: 45: 28Z
  4. Bien, gracias de nuevo, arreglado. Simplemente no he usado <hr> demasiado, la verdad. =) Mi sugerencia original, propiedad border, fue motivada por lo que vi en los estilos de html5boilerplate.
    2011-06-17 09: 15: 11Z
  5. Por qué incluso molestarcon la frontera en absoluto? ¿Por qué no darle un color de fondo y acabar con él? Edición: nvm, no vi la respuesta sobre la compatibilidad del navegador.
    2016-05-26 12: 39: 48Z
  •  border-color funciona en Chrome y Safari .
  •  background-color funciona en Firefox y Opera.
  •  color funciona en IE7 + .
106
2018-12-28 13: 22: 48Z
  1. Si deseamos que nuestro sitio se vea en todos los navegadores, ¿debemos usarlos todos?
    2014-09-13 08: 28: 20Z
  2. border-color no funciona en Chrome. Intenta configurarlo en blanco sobre fondo blanco. Estos dos funcionarán: o bien 1) color:white; border-style:solid; o 2) border-color:white; border-style:solid;.
    2015-01-26 14: 16: 06Z
  3. @ Pacerier sí lo hace. Es posible que deba especificar un estilo y /o ancho
    2015-11-13 16: 22: 09Z
  4. la información re. IE (al menos) es incorrecto. 'border-color' funciona bien en IE; 'color' no (IE11)
    2018-06-13 22: 22: 13Z

Creo que esto puede ser útil. este era un simple selector de CSS.

 
hr { background-color: red; height: 1px; border: 0; }
    
76
2018-12-28 13: 23: 13Z
  1. Esto definitivamente me funcionó en el escritorio de Chrome: < style > hr {color de fondo: rojo; altura: 1px; borde: 0; } < /style > < hr >
    2017-03-24 13: 21: 42Z
 
hr {
    height: 1px;
    color: #123455;
    background-color: #123455;
    border: none;
}

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

    
40
2018-12-28 13: 23: 24Z

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

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

Consulte el violín .

    
21
2018-12-28 13: 25: 19Z

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

 
hr {
    border-top: 1px solid #ccc;
}
    
12
2018-12-28 13: 25: 34Z
 
hr {
  height:0; 
  border:0; 
  border-top:1px solid #083972; 
}

Esto mantendrá la Regla Horizontal de 1px de grosor y también cambiará el color de la misma

    
9
2013-10-25 16: 55: 36Z
  1. La mejor respuesta aquí. Establecer la altura en 0px y agregar el borde no hace que la hr 2 px de ancho. Gran llamada !!
    2014-12-21 22: 29: 02Z
 
hr
{
color: #f00;
background-color: #f00;
height: 5px;
}
    
8
2011-06-17 06: 18: 57Z

Creo que este es el enfoque más efectivo:

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

O si prefiere hacerlo en todos los elementos de hr, escriba esto en su CSS:

 
hr {
    background-color: transparent;
    border-top: 1px solid #ccc;
}
    
8
2017-05-10 14: 02: 56Z

Después de leer todas las respuestas aquí y de ver la complejidad descrita, me puse a una pequeña distracción para experimentar con RH. Y, la conclusión es que puedes deshacerte de la mayoría de los CSS pareados que escribiste, lee este pequeño primer y solo usa estas dos líneas de CSS puro:

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

Eso es TODOS lo que necesitas para diseñar tus RR.HH.

  • Funciona entre navegadores, dispositivos cruzados, dispositivos cruzados, canales en inglés cruzado, edades cruzadas.
  • No "Creo que esto funcionará ..." , "debe tener en cuenta Safari /IE ..." , etc.
  • sin css extra - no height, width, background-color, color, etc. involucrados.

Solo HR a prueba de balas de colores. Es que simple TM .


Bonus: para darle a la HR un poco de altura H, simplemente configure el border-width como H/2.

    
6
2017-04-28 07: 46: 38Z
  1. Tomé una apuesta en cada dirección: `` `hr {border-top: 1px sólido púrpura; color del borde: morado; color de fondo: púrpura; color morado; } ~~~
    2019-03-24 11: 45: 12Z
  2. |: - [] cielos, creo que lo has exagerado
    2019-03-24 15: 46: 15Z
 
hr
{
  background-color: #123455;
}

el fondo es el que deberías intentar cambiar

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

    
5
2011-06-17 06: 17: 34Z
  1. Lo probé en Firefox 5 Beta, IE 9, Chrome, Opera y Safari ... estás bien, todos funcionan;)
    2011-06-17 06: 24: 23Z
  2. @ keoki Zee: gracias por hacer la prueba
    2011-06-17 06: 26: 38Z
  3. no funciona en Chrome para mí
    2011-06-17 06: 31: 27Z
  4. @ kool, ¿qué parte no funciona? ¿color de fondo? o borde de color? Acabo de probar el color del borde: azul; y funciono en cromo
    2011-06-17 06: 33: 02Z
  5. @ koool Aquí hay un violín, ¿realmente no funciona? jsfiddle.net/TGtSd/9
    2011-06-17 06: 35: 16Z

si usas la clase css, todas las etiquetas 'hr' la tomarán, pero si quieres una 'hr' particular, usa el siguientecódigo es decir, css en línea

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

si no está funcionando en Chrome, intente a continuación el código:

 
<hr color="red" />
    
5
2011-06-17 06: 33: 54Z
  1. No funciona en Chrome, jsfiddle.net /TGtSd /7
    2011-06-17 06: 26: 42Z
  2. probé solo en Chrome
    2011-06-17 06: 31: 00Z
  3. <hr color="red" /> ni siquiera utiliza CSS ...
    2011-06-17 06: 39: 47Z
  4. pero (< hr color = "red" />) funciona perfectamente en mi chrome
    2011-06-17 06: 44: 36Z
  5. sí, está bien, estaré de acuerdo con eso ...
    2011-06-17 06: 46: 26Z

Estoy probando en IE, Firefox y Chrome en mayo de 2015 y esto funciona mejor con las versiones actuales. Centra el HR 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" />
    
4
2016-02-10 19: 05: 16Z
  1. exactamente lo que estaba buscando. Mi error fue que estaba agregando un espacio entre hr y clase en la definición de css (hr .light {})
    2016-12-08 18: 54: 00Z

Debes 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 />
    
4
2016-02-10 19: 06: 46Z

Es simple y mi favorito.

 
<hr style="background-color: #dd3333" />
    
4
2017-08-13 21: 09: 32Z

Algunos navegadores usan el atributo color y algunos usan el atributo background-color. Para estar seguro:

 
hr{
    color: #color;
    background-color: #color;
}
    
3
2011-06-17 06: 20: 07Z

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

si quieres una altura variable de css, quita todos los bordes y dale 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*/
    }

De ambas formas, si establece un ancho, siempre tendrá su tamaño.

No es necesario configurar display:block; para esto.

Para estar totalmente seguro, puede combinar ambos, ya que 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 seguridad es seguridad.

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

Recuerde: Gmail solo detecta css en línea y es posible que algunos clientes de correo electrónico no admitan fondos o bordes. Si uno falla, todavía tendrá una línea de 1px. Mejor que nada.

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

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

Con este método, QUIERE hacer esto de 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 compruebes: http: //jsfiddle.net/sna2D/

    
2
2013-12-03 11: 27: 46Z

Puedes 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.

    
0
2013-08-21 13: 03: 39Z

Bueno, soy nuevo en HTML, CSS y en Java, pero probé lo 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 he dado id="myHR" al elemento HR y lo he usado 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";
    
0
2015-05-19 04: 07: 53Z
  1. Código funciona para IE más antiguo
  2. Probado por muchos colores

     
    <hr color="black">
    <hr color="blue">
    
0
2015-05-25 09: 14: 32Z
  1. No HTML5 válido.
    2016-03-30 20: 21: 46Z

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

La propiedad color no se hereda de forma predeterminada, por lo que se debe agregar lo siguiente a hr's para permitir la herencia de 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">
    
0
2015-09-01 13: 21: 29Z

Podrías hacer esto:

 
hr {
  border: 1px solid red;
}
<hr />
This s a test
<hr />
    
0
2016-02-10 19: 03: 10Z

Puede asignar la etiqueta <hr noshade> e ir a su archivo css y agregar:

 
hr {
    border-top:0;
    color: #123455;
}
<hr noshade />
This s a test
<hr noshade />
    
0
2016-02-10 19: 04: 04Z

Como regla general, no puedes simplemente establecer el color de una línea horizontal con CSS como lo harías 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 tu CSS para leer así:

“color de fondo: # 123455”

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

A continuación, deberá asignar algunas dimensiones a la línea horizontal o, por defecto, se ajustará a la altura, el ancho y el color estándar establecidos por su navegador. Aquí hay un código de ejemplo de cómo debería verse 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 inserta una línea horizontal, como esta:

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

Espero que esto ayude.

    
0
2018-09-19 17: 00: 04Z

Tomé una apuesta en cada dirección:

 
  hr {
    border-top: 1px solid purple;
    border-color: purple;
    background-color: purple;
    color: purple;
  }
    
0
2019-03-24 11: 46: 47Z

También puedes usar la etiqueta de fuente Por ejemplo,

 
<font color="red"><hr></font>
    
- 2
2017-06-30 16: 28: 03Z
  1. Las etiquetas <font> están en desuso y no deben usarse.
    2017-06-30 16: 28: 22Z
fuente colocada aquí