Personalizar la selección de texto en un xhtml



Experimentando con CSS 3 me encontre con esta propiedad “selection” que lo que hace es aplicar una personalizacion sobre los textos que pintamos cuando los seleccionamos. Interezante para poder explotar mejor nuestra creatividad, pero lamentablemente solo lo soporta firefox y safari! :( pero bueno muy pronto calculo y espero que todos podamos trabajar en css3 como un estándar!

  1. <p class="pintar">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean eu mauris. Donec in arcu et dui ullamcorper viverra. Mauris volutpat massa id augue. Morbi quis lectus non tortor sodales vulputate. Morbi accumsan justo vel sapien. Donec eget turpis. Vestibulum ullamcorper, nunc vel sodales cursus, justo elit laoreet purus, at facilisis risus sem et mi. Nunc nibh mauris, gravida porttitor, volutpat vel, viverra eu, mauris. Nunc libero magna, pretium non, fermentum sit amet, molestie at, turpis. Aenean feugiat. Maecenas neque. Aliquam erat volutpat. Duis quis nisi. Aliquam id lacus at leo facilisis posuere. Phasellus molestie. Fusce ligula libero, egestas vitae, imperdiet eu, porta vel, lectus. Nullam vitae massa nec justo blandit vestibulum. Nullam faucibus tellus eu turpis.</p>
  1. @charset "utf-8";
  2. /* CSS Document */
  3. /*para safari*/
  4. p.pintar::selection {
  5. background:#99CC00;
  6. }
  7. /*para firefox*/
  8. p.pintar::-moz-selection {
  9. background:#99CC00;
  10. }

Vean el ejemplo con firefox