Cambiar el color del texto seleccionado

21 de abril de 2009 57 comentarios ,
Este "truco" es para cambiar el color de fondo que aparece al seleccionar un texto, esto es para poder personalizar más su blog y poder usar un color que combine o contraste con los colores de su página. Ya que por defecto el navegador nos da un color predeterminado, generalmente azul.

Texto seleccionado
Para personalizarlo necesitamos un poco de CSS, vamos a Planilla | Edición de HTML y antes de ]]></b:skin> pegamos lo siguiente:


/* Color texto seleccionado */
::selection {
background: #ccc;
}

::-moz-selection {
background: #ccc;
}


El color lo pueden cambiar por el que ustedes quieran, sólo ingresan el código de color en background. En el ejemplo el color cambia a gris.

text selected
Puedes ver cómo queda seleccionando cualquier parte de texto en esta entrada, el color que yo he puesto es gris oscuro.

(23/ABR/09) ACTUALIZACIÓN:
Este efecto funciona sólo para Firefox, Safari, Google Chrome, Konqueror, Opera y Flock.


57 comentarios en:

" Cambiar el color del texto seleccionado "

  1. Ya había visto este efecto en algunos otros sitios, y siempre lo quise aplicar a mi blog, pero no sabía como...

    Definitivamente sencillos trucos CSS que ayudan mucho a mejorar la imagen del blog.. acabo de implementar el de.. a:focus {outline: none;}

    Para no mostrar el cuadro al hacer clic a un link, en lo personal.. no me gustaba..

    Saludos!

    ResponderEliminar
  2. Coincido contigo, creo que igual lo implementaré en mi blog.
    Saludos.

    ResponderEliminar
  3. si, muchas gracias por este truco de CSS, me gustó mucho, a por cierto, gracias a ti tambien 'Turko' porque lo que dijiste en ese comentario es algo que estaba buscando hace años!!!

    El potro™: tu blog es genial y siempre lo será, me encantan los diseños, ese fosforeado al principio de la sidebar y del main, es genial, los titulos, el buscador al lado del header, yo si me propusiera hacer eso tal vez lo haga, lastima que nunca tengo tanto tiempo con esto del liceo y eso, pero bueno, algo es claro, me encata tu blog, al igual que muchos otros, y te mereces que te diga esto porque ser un hombre que trabajó tanto en blogger, jaj, simplemente genial!!!

    Por sierto, deberias pasarte por mi blog y dime que tal esta, quiero (si tienes tiempo claro) que me digas que te parece que debería poner para que quede exelente, como dije antes, solo si tienes tiempo o si quieres, ok? bueno, te seguire visitando, saludos
    Ascesino96

    ResponderEliminar
  4. Hola Ascesino96,

    De verdad mil gracias por tus comentarios, me da gusto saber que mi esfuerzo puede servir de ayuda para más gente.

    Tu blog lo veo bien, aunque podrías jugar un poco más con los colores, quizá otra combinación de tonos podría darle más "vida".

    Cualquier cosa estoy a tus órdenes.

    Saludos!!!

    ResponderEliminar
    Respuestas
    1. Gracias Potro, aquí otro truco que andaba buscando, sólo lo googlee y resulté de nuevo en tu blog. Es genial. Mil y mil gracias.

      Lion
      www.bitacolion.blogspot.com

      Eliminar
  5. Excelente truco!. Hace rato andaba buscando esto.
    héchale un vistazo a mi blog ;)

    Saludos.

    ResponderEliminar
  6. Potro! como puedo cambiar el color del título de mi blog!!

    graciaS!!!

    ResponderEliminar
  7. Busca en tu blog esta línea:
    #header h1 {

    Debajo de ella agrega esto:
    color:#ccc;

    Cambia #ccc por el código del color que quieras.

    Saludos.

    ResponderEliminar
  8. Hola, espero que estes bien quisiera saber como puedo cambiar el color del texto del menu de mi pagina que es http://www.musicaconcalibre.net

    espero tu respuesta please

    ResponderEliminar
  9. Busca esta parte en tu plantilla:

    #catmenu li a, #catmenu li a:link, #catmenu li a:visited {
    color:#000;

    Cambia lo que está en negrita por el código del color que deseas.

    ResponderEliminar
  10. gracias mee funciona a mil eres un caballo en esto!! sigue hazi pana :D GRACIAS MIL

    ResponderEliminar
  11. Cuando quiero publicar una entrada y a una parte del texto cambiarle la fuente y el color, no me deja.- La plantilla que uso ese minima stretch. no tengo idea porqué no me deja.- espero tu respuesta :]

    ResponderEliminar
  12. Desde hace unas semanas el editor antiguo tiene ese problema, incluso yo lo tenía y me tuve que cambiar al editor actualizado para poder editar las entradas sin esos conflictos.
    Para cambiar el editor entra en Configuración > Básico, y hasta abajo donde dice 'Seleccionar editor de entradas' elige 'Editor actualizado (recomendado)'

    Con ese podrás darle formato a los textos sin ningún problema.

    ResponderEliminar
  13. Hay alguna manera que las palabras al seleccionarlas cambien de color?

    ResponderEliminar
  14. Claro, sólo agrega debajo de ambos background: #ccc; esto:

    color: #fff;

    ResponderEliminar
  15. Gracias potro como siempre El MEJOR!!!!!

    ResponderEliminar
  16. como siempre me sirvio :) y aparte hice un tutorial con su respectivo credito http://kronzio.blogspot.com http://kronzio.blogspot.com/2011/04/cambiar-el-color-del-texto-marcado.html

    ResponderEliminar
  17. Es de esos truquillos super simples pero que favorecen en mucho la personalización :)

    ResponderEliminar
  18. buenisimo truco potro grasias fijate que yo lo uso para que no seme seleccione nada y me funciono igual no saves si ay manera de que no se me seleccione el slide show y los iconos por que al pasar el raton es lo unico que se me selecciona o nomas funciona con el texto.

    ResponderEliminar
  19. Únicamente aplica para el texto, pues aun cuando le pongas none como background seguirá seleccionando los demás elementos que no sean texto :/

    ResponderEliminar
  20. Hola Potro yo de nuevo, espero me ayudes una vez mas, como puedo cambiar el color de la letra de mis entradas o post asi claro el titulo tambien, por el fondo de mi blog siento que no se lee claro, aca te pongo la direccion para que lo veas y me expliques como puedo hacer, el link es http://www.totalkaraoke.co.cc, mil gracias como siempre

    ResponderEliminar
  21. En esta área puedes cambiar el color de los títulos:

    .title {
    margin: 0 0 8px 0;
    padding: 0px;
    line-height: 22px;
    font-size: 24px;
    font-family: Arial, Helvetica, Sans-serif;
    color: #B3B3B3;
    font-weight: bold;
    }
    .title a {
    text-decoration: none;
    color: #B3B3B3;
    }
    .title a:hover {
    color: #2596AC;
    }

    El color de las entradas me parece que se cambia aquí:
    body {font-size:75%;color:#222;

    Por cierto, desde hace unos días Google dejó de indexar los dominios .co.cc así que te recomiendo que regreses a blogspot de lo contrario tendrás visitas casi nulas.

    Saludos.

    ResponderEliminar
  22. Uy, eso si esta malo, gracias por prevenirme, como revierto o como me devuelvo a Blogspot, sigo siendo novato y quien te da mas trabajo, que pena

    ResponderEliminar
  23. ya me devolvi a blogspot Potro, gracias por la informacion, Crees que se recuperara el co.cc, mejor dicho que corrijan el problema

    ResponderEliminar
  24. Pues no lo sé, eso depende de Google, quizá más adelante los indexen de nuevo.

    ResponderEliminar
  25. ahh no puede ser ya maten a iexplorer :@

    ResponderEliminar
  26. Lo sé, ya sabes cómo es de necio Microsoft con no adaptarse a lo que el usuario necesita.

    ResponderEliminar
  27. Buenas potro.

    Vamos a ver esto puedo parecer una idiotez, pero yo te pregunto por si acaso.

    Fijémonos en como tienes configurado esto en tu página.

    Tu pagina las letras son negras y no tienen fondo. Cuando seleccionas el texto tus letras cambian al blanco y el fondo a gris oscuro.

    He instalado el CSS pero cuando selecciono el texto en mi web el fondo me sale en marron tal y como quería, sin embargo las letras siguen en negro cuando en blanco quedarían mucho mejor.

    ¿Qué debo modificar para poner las letras blancas cuando selecciono texto?

    Gracias como siempre.

    ResponderEliminar
  28. Hola William,

    Ahí mismo se le puede agregar la propiedad del color:

    ::selection {
    background: #ccc;
    color:#fff;
    }

    ::-moz-selection {
    background: #ccc;
    color:#fff;
    }

    ResponderEliminar
  29. Muchas gracias potro voy a probarlo ^^

    ResponderEliminar
  30. Hola Amigo!...

    Me interesó este post, y ya lo puse a prueba, pero fijate que tambien se me ocurrió que tal vez seria posible poner un Texto que cambie de color solito, como una especie de color arcoiris, bueno, la verdad lo necesito para colocar un texto que llame bastante la atención, en algun gadget HTML/Javascript algo como "click aqui"...

    Potro porfa, si tienes algun post asi, me ayudarias a encontrarlo o si no me ayudarias a descubrir un codigo similar???

    Gracias por adelantado!...

    ResponderEliminar
  31. Andas de suerte porque aquí hay uno ;)
    http://ciudadblogger.com/2009/06/mensaje-con-efecto-arcoiris.html

    ResponderEliminar
  32. Gracias Amigo, te debo unas cuantas!.. jejeje ;)

    ResponderEliminar
  33. weiii yo quieroo poner otro colores y nose como son los codigo

    ResponderEliminar
  34. En el menú de Ciudad Blogger hay una pestaña que dice Colores, ahí puedes seleccionar el color que quieras y saber su código.

    ResponderEliminar
  35. Gracias, excelente!!! Lo aplique a mi blog.

    ResponderEliminar
  36. Si mi color es " #D8BCD6 " donde lo debo colocar D: ? plea se e e

    ResponderEliminar
  37. Cambia donde dice #ccc por el código que has elegido, en este caso #D8BCD6

    ResponderEliminar
  38. exelete potro cada q busco algo de css en google te encuentro XD
    YO LE APLIQUE ESTE

    background: yellow;
    color: black;
    text-shadow: none;

    ResponderEliminar
  39. Potro! hago todo el procedimiento pero no se me guarda o... yo no lo puedo ver en mi blog! :S
    http://egoluegoexissto.blogspot.com.ar/

    ResponderEliminar
    Respuestas
    1. Lo que pasa es que más arriba tienes este código:
      .post-body img {

      Justo arriba de eso te falta una llave de cierre }
      Por eso nada de lo que pongas debajo hará efecto.

      Eliminar
  40. Ya me había funcionado y de pronto ya no sale más, le tengo en otro color y no aparece..
    /* Color texto seleccionado */
    ::selection {
    background: #e1adc3;
    }

    ::-moz-selection {
    background: #e1adc3;
    }

    También intenté con este código que encontré, pero no funciona :(
    qué hago?

    ::-moz-selection  { 
    Background: #e1adc3; 
    color: #5E5E5E; 
    text-shadow: none;  
      

    ::selection   { 
    background: #e1adc3; 
    color: #5E5E5E; 
    text-shadow: none;  
      

    ResponderEliminar
    Respuestas
    1. Hola Diana, yo sí lo veo funcionando en el blog "Dianisther".

      Eliminar
  41. Hola, muchísimas gracias por compartir este efecto, pero quería comentarte que no me funciona y no sé qué hacer.

    ResponderEliminar
    Respuestas
    1. Hola, ¿en cuál blog lo has puesto?

      Eliminar
    2. En este: http://sugoikawaiilife.blogspot.com.es/

      Eliminar
    3. Este comentario ha sido eliminado por el autor.

      Eliminar
    4. Elimina, esto:

      big {font-size:90px; /*tamaño de la letra*/
      font-style:bold;
      color: #B40431; /*Color de la letra*/
      line-height:30px;
      float:left;}

      Parece estar sobrando y perjudicando esos estilos.
      Aquí tienes otro error:

      ::-webkit-scrollbar-thumb {
      background-image:url(http://i.imgur.com/2Y9Lg.png);
      -Moz-border-radius-bottomRight: 50px; border-bottom-right-radius: 50px; -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px;
      {

      La llave de cierre es } no {

      Y aquí otro error:

      #Followers1 .widget-content{
      height:auto;
      width:auto;
      background-image:url(http://i1085.photobucket.com/albums/j433/Annyz-chan/cutefondobyannyzblog.gif);repeat; repeat; padding: 5px;
      border: 2px dashed #F0CDFC ;
      border-radius: 8px;
      }

      Ahí has puesto tres veces un punto y coma ; en una misma declaración. Cambia esto:
      background-image:url(http://i1085.photobucket.com/albums/j433/Annyz-chan/cutefondobyannyzblog.gif);repeat; repeat; padding: 5px;


      Por esto:
      background:url(http://i1085.photobucket.com/albums/j433/Annyz-chan/cutefondobyannyzblog.gif) repeat;
      padding: 5px;

      Eliminar
    5. Muchas gracias, Potro. Ya funciona ^^ Y me disculpo por molestarte :)

      Un abrazo.

      Eliminar
    6. No ha sido ninguna molestia ;)

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger