Cómo hacer un DIV no seleccionable en HTML

Escrito por michael carroll | Traducido por daniel gómez villegas
  • Comparte
  • Twittea
  • Comparte
  • E-mail

Cascading Style Sheets (CSS) se añadieron al estándar HTML que te permite controlar el aspecto y comportamiento de los elementos en tus páginas web con mayor precisión. Por desgracia, los estándares web no siempre se aplican en todos los navegadores web de la misma forma y con la misma sintaxis. Para evitar que el usuario seleccione texto en un elemento "div" de tu página web, debes especificar varias propiedades CSS para garantizar un comportamiento adecuado en los navegadores actuales, y un atributo de etiqueta especial se debe utilizar para Internet Explorer. Otras propiedades ayudan a asegurar la compatibilidad con algunas versiones de navegadores antiguos.

Nivel de dificultad:
Fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Coloca el siguiente código CSS entre las etiquetas "header" de tu documento HTML:

    <style type="text/css"> .noselect { user-select: none; -webkit-user-select: none; -moz-user-select: -moz-none; } </style>

    La primera propiedad es el mejor estándar definido por el futuro, ya que es parte del proyecto de trabajo de la especificación del Consorcio de la World Wide Web para CSS3. El segundo es específico para el navegador de Apple Safari, y el tercero para Mozilla Firefox.

  2. 2

    Asigna la clase "noselect " a una etiqueta "div" en el cuerpo del documento HTML para hacer el texto no seleccionable en el. Por ejemplo:

    <div class="noselect">You can't select this text.</div>

  3. 3

    Añade el atributo "unselectable" a una etiqueta "div" para añadir soporte para Internet Explorer:

    <div class="noselect" unselectable="on">You can't select this text.</div>

  4. 4

    Guarda la página y cárgala en un navegador web. El texto en el elemento "div" no podrá ser seleccionado. Si estás utilizando una versión antigua de Safari u Opera, trata de añadir lo siguiente a la clase "noselect" en el código CSS:

    -o-user-select: none; -khtml-user-select: none;

  5. 5

    Cambia ".noselect" al "div" en el código CSS para aplicar las propiedades a cada elemento "div" de la página, para que no sea necesario que especifiques una clase para cada uno si deseas que todos que sean no seleccionables. Todavía tienes que añadir el atributo "unselectable" a cada uno, no obstante.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles