Pregunta Cambiar el color de un elemento hr


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

hr {
  color: #123455;
}

607
2018-06-17 06:15


origen


Respuestas:


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 <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 especificó en los estilos, y la línea se rellenará con el color predeterminado (que no es un efecto deseado la mayor parte del hora). Entonces parece que en este caso también necesitarías especificar background-color (como @Ibu sugirió en su respuesta).

HTML 5 Boilerplate proyecto 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 noble "12 hechos de CSS poco conocidos", publicado recientemente por SitePoint, menciona que <hr> puede establecer su border-color a sus padres color si especifica hr { border-color: inherit }.


915
2018-06-17 06:17



border-color trabaja en Cromo y Safari
background-color funciona en Firefox y Opera
color trabaja en IE7 +


93
2017-09-13 04:30



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

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

61
2018-05-01 14:56



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 personalizar HR con CSS


32
2017-12-05 02:52



probado en ff, opera, es decir, cromo y safari

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

ver el violín http://jsfiddle.net/HPSjU/


17
2018-06-17 06:22



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

Esto mantendrá la Regla Horizontal 1px de espesor al mismo tiempo que cambia el color de la misma


9
2017-10-25 16:55



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

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

7
2018-05-17 13:00