html - linea - Cambiando el color de un elemento hr

linea html hr color

Question

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

Answer 1

1. El código funciona para IE más antiguo

2. Probado por muchos colores

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

Answer 2

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

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

Answer 3

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 id="myHR" 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";

Answer 4

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

Si desea una altura variable de css, quite todos los bordes y asigne 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 la display:block; para esto.

Para estar totalmente seguro, puede mezclar ambos, porque algunos navegadores pueden confundirse con la 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 2 px 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, puede intentar agregar color:blue; .

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

Con este método, deseará hacer esto: <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/

Answer 5

Como regla general, no puede 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 tu 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, de forma predeterminada, se ajustará a 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 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 esto:

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

Espero que esto ayude.

Answer 6

Creo que deberías usar border-color lugar del 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 en la mayoría de los casos). hora). Así que parece que en este caso también deberías especificar background-color (como sugirió @Ibu en su respuesta).

El proyecto HTML 5 Boilerplate en su hoja de estilo predeterminada specifies 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 poco conocidos de CSS" , publicado recientemente por SitePoint, menciona que <hr> puede establecer su border-color de su padre si especifica hr { border-color: inherit } .

Answer 7

Creo que este es el enfoque más eficaz:

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

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

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

Answer 8

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

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

Answer 9

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

Answer 10

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 recursos humanos. Y, la conclusión es que puedes deshacerte de la mayoría de los CSS pareados que escribiste, leer este pequeño primer y usar estas dos líneas de CSS puro:

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

Eso es todo lo que necesitas para diseñar tus recursos humanos.

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

Sólo HR a prueba de balas de colores. Es así de simple ^TM .

Bono: para darle a la HR cierta altura H , simplemente configure el border-width del border-width como H/2 .

Answer 11

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

La propiedad de color no se hereda de forma predeterminada, por lo que se debe agregar lo siguiente a hr 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">

Answer 12

Es simple y mi favorito.

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

Answer 13

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 70% ancho:

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

<hr class="light" />

Answer 14

Podrías hacer esto:

hr {
  border: 1px solid red;
}

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

Answer 15

Probado en ff, opera, ie, chrome y safari.

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

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

Answer 16

Puede <hr noshade> 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 />

Answer 17

Puedes usar CSS para hacer una línea con un color diferente, 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.

Answer 18

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

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

Answer 19

También puede utilizar la etiqueta de fuente para, por ejemplo,

<font color="red"><hr></font>

Answer 20

si usas la clase css, todas las etiquetas ''hr'' la tomarán, pero si quieres una ''hr'' particular, usa el siguiente código, es decir, inline css

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

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

<hr color="red" />

Answer 21

border-color funciona en Chrome y Safari.
background-color funciona en Firefox y Opera.
color funciona en IE7 +

Answer 22

hr
{
  background-color: #123455;
}

El fondo es el que debes tratar de cambiar.

También puedes trabajar con los bordes de color. No estoy seguro de que creo que hay problemas con este cursor. Deberías probarlo en diferentes navegadores.

Answer 23

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

Esto mantendrá la Regla Horizontal de 1px de grosor al mismo tiempo que cambia su color.

Answer 24

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: How To Style HR con CSS

Answer 25

hr { color: #f00; background-color: #f00; height: 5px; }