selectores - selector padre css
Regla CSS para deshabilitar la columna de la tabla de resaltado al seleccionar (2)
Fondo
Buscando desactivar, resaltando la primera columna de una tabla.
Fuente HTML
<table>
<tbody>
<tr><td class="unselectable" unselectable="on"><button value="1" unselectable="on" class="unselectable"><div unselectable="on" class="unselectable">✘</div></button></td><td>Row 1</td></tr>
<tr><td class="unselectable" unselectable="on"><button value="2" unselectable="on" class="unselectable"><div unselectable="on" class="unselectable">✘</div></button></td><td>Row 2</td></tr>
<tr><td class="unselectable" unselectable="on"><button value="3" unselectable="on" class="unselectable"><div unselectable="on" class="unselectable">✘</div></button></td><td>Row 3</td></tr>
</tbody>
</table>
Fuente de CSS
*.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}
Violín
Problema
Cuando el usuario selecciona y arrastra el botón del mouse sobre la mesa, el texto del botón (✘) aparece resaltado (comportamiento no deseado). Cuando el usuario copia y pega los valores, el valor (✘) no está incluido (comportamiento deseado).
Para aclarar, este es el comportamiento actual (no deseado):
La siguiente imagen muestra el comportamiento deseado después de arrastrar el mouse sobre la tabla:
A la mayoría de los usuarios probablemente no les importe, pero es una experiencia de usuario ligeramente engañosa. Lo que sea que un usuario resalte el texto y lo copie, se espera que todo el texto resaltado se copie. Al agregar la clase unselectable , el valor de los botones (✘) se resalta, pero no se copiará. El usuario simplemente no debería poder resaltar (seleccionar) el (✘) porque está configurado como unselectable .
Ambiente
Estoy usando Firefox 19.0.2 en Xubuntu, pero busco una solución de navegador cruzado.
Pregunta
¿Qué es una forma de navegador cruzado para evitar que el usuario destaque la primera columna de la tabla (que contiene los botones)?
Relacionado
- ¿Cómo deshabilitar resaltar la selección de texto usando CSS?
- ¿Hay alguna manera de hacer un DIV no seleccionable?
- ¿Imita "onselectstart = return false" usando CSS u otro enfoque que no sea JS?
- http://www.mindfiresolutions.com/Using-of-onselectstart-and-its-alternative-for-Firefox-239.php
- http://therelentlessfrontend.com/2010/02/13/how-to-disable-text-selection-in-a-table/
Solo una solución
Hasta ahora, solo he encontrado una solución bastante inconveniente para esto. Oculta todo el texto "real" en el elemento unselectable y lo reemplaza con pseudo-texto a través de a :before pseudo-element. Nota: si no hay necesidad de tener texto "real" en el html, entonces los elementos del span anidados (y por lo tanto algunos html redundantes) y los css asociados a continuación pueden eliminarse, pero todo depende de cuán "importante" sea el el texto está en su aplicación real (para lectores de pantalla, motores de búsqueda, etc.).
HTML
<table>
<tbody>
<tr><td><button value="1"><div class="unselectable" data-content="✘"><span>✘</span></div></button></td><td>Row 1</td></tr>
<tr><td><button value="2"><div unselectable="on" class="unselectable" data-content="✘"><span>✘</span></div></button></td><td>Row 2</td></tr>
<tr><td><button value="3"><div unselectable="on" class="unselectable" data-content="✘"><span>✘</span></div></button></td><td>Row 3</td></tr>
</tbody>
</table>
CSS
*.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}
*.unselectable span {
display: none;
}
*.unselectable:before {
content: attr(data-content);
}
Parece que los navegadores no copian el contenido si está configurado a través de la regla CSS de content . Con suerte no es necesario que sea compatible con IE7
button.unselectable:after {
content: "/2718";
}