CSS solo leído
Ejemplo 01
Comencemos con el primer ejemplo del uso de atributos de solo lectura CSS en el código HTML. Hemos comenzado este primer ejemplo con el formato estándar de las etiquetas HTML. A partir de la etiqueta de apertura HTML, ha estado siguiendo la apertura de la etiqueta de cabeza y estilo. Dentro de la etiqueta de estilo, hemos estado diseñando el cuerpo de nuestra página HTML. Durante un tiempo, echemos un vistazo al cuerpo de este código HTML primero. Hemos agregado un total de 2 párrafos en el cuerpo de la página web HTML. Los párrafos contienen textos simples dentro de ellos. Ambas aberturas del párrafo son seguidas por su texto,
Etiqueta para agregar una ruptura de enlace en la página web y la etiqueta para agregar algunos elementos de entrada a la página web.
Ambas etiquetas de entrada contienen el atributo "Valor" con el valor "Leer y escribir TextBox" y "Box de texto de solo lectura". Además, la segunda etiqueta de entrada del segundo párrafo contiene el atributo "solo de lectura" dentro de él. Después de esto, ambas etiquetas de entrada contienen el estilo en línea a través de la etiqueta de estilo utilizada dentro de ellas. Ambos cuadros de texto de entrada serán de altura de 30 px y ancho de 250 px. Las etiquetas de párrafo están cerradas aquí, junto con la etiqueta del cuerpo del código HTML. Dentro de la etiqueta de estilo, hemos estado diseñando la etiqueta del párrafo que contiene el título de solo lectura, yo.mi., Segundo cuadro de texto. El fondo del cuadro de texto de solo lectura en particular se ha establecido en naranja-rojo. Esto se trata del estilo y la etiqueta de la cabeza. Este código ahora está completo y está listo para ser ejecutado en el navegador Chrome a través del código de Visual Studio.
Después de la ejecución de este código, obtuvimos los dos cuadros de texto con dos párrafos en la nueva pestaña de nuestro navegador. El primer cuadro de texto es el cuadro de texto de lectura y escritura, yo.mi., Puedes escribir en él y leer lo que hayas escrito. Por otro lado, el cuadro de texto de color rojo naranja-rojo de solo lectura solo se puede ver y no es editable.
Ejemplo 02
Comencemos con otro ejemplo de HTML para crear elementos de solo lectura usando el estilo CSS. Dentro de este código, hemos agregado la misma etiqueta junto con la etiqueta, seguida de la cabeza principal y las etiquetas del cuerpo. La etiqueta del cuerpo de este código simple contiene texto simple dentro de él sin el uso de ninguna etiqueta. Después de este texto, hemos estado utilizando la etiqueta para crear algunos elementos dinámicos como la caja de texto dentro de nuestra página web HTML. Este cuadro de texto de entrada se ha clasificado con la clase "DisablePointerevents". El elemento de entrada ha sido nombrado "entrada" con el valor "texto de solo lectura". El estilo en línea se ha utilizado para establecer la altura de 30px y el ancho de 250px para este cuadro de texto.
El cuerpo de nuestra página HTML ahora está completo, y vamos a ver la etiqueta de estilo de este código HTML ahora. Hemos estado utilizando la clase "DisablePointerevents" de la etiqueta "Entrada" para diseñarla. Los eventos de puntero de propiedad se han establecido en ninguno. El color de fondo para el cuadro de texto se ha configurado en hotpink. Se trata del estilo de la página web HTML. Guardemos y ejecutemos dentro del código de Visual Studio seguido del navegador.
Después de ejecutar este código, la pestaña del navegador nos muestra el texto simple seguido del cuadro de texto rosa. Después de hacer clic en el área de texto de la caja de texto, no podemos escribir nada. Esto se debe a que hemos usado los eventos de puntero correctamente establecidos en ninguno en la etiqueta de estilo.
Ejemplo 03
Echemos un vistazo a los últimos, pero no menos, los ejemplos de este artículo. Dentro de este artículo, haremos un elemento que se escriba, mientras que el otro es lectura mediante el uso de algunas propiedades. Este script HTML se ha iniciado con la etiqueta HTML seguida de la etiqueta de cabeza que contiene una larga lista de propiedades de estilo dentro de su etiqueta de estilo. La etiqueta del cuerpo de este script HTML contiene la propiedad "Fieldset" aquí, agrupa los elementos similares en un conjunto y los estiliza en consecuencia. Este elemento de Fieldset contiene la etiqueta de la leyenda y la etiqueta Div. Hemos estado utilizando la propiedad contenta establecida en "verdadero" para esta etiqueta, yo.mi., Su título sería editable y usó el título "Información de envío de pedidos del cliente" en él.
La etiqueta Div contiene un nuevo textea dentro de ella que será identificado por la ID "C_address" seguido de su nombre "C_address", y lo establecemos en solo lectura. Esta área de texto contiene información de texto dentro de él que solo es lectura y no puede ser editable. La etiqueta TextARea junto con el contenedor Div se ha completado aquí. Hemos estado cerrando la etiqueta del campo aquí también, yo.mi., que está sosteniendo la sección Div dentro de ella. El cuerpo de nuestra página HTML se ha completado aquí, por lo que hemos estado cerrando el cuerpo y la etiqueta HTML.
La etiqueta de estilo de la etiqueta de cabeza principal ha estado utilizando muchas propiedades para elementos del cuerpo. Hemos estado estableciendo el ancho, los márgenes y la familia de fuentes de todo el cuerpo de esta página HTML mediante el uso de la palabra clave "cuerpo". El acolchado y los márgenes se han preparado para el elemento del campo, yo.mi., que contiene otros elementos dentro de sí. El elemento de leyenda ha estado utilizando una propiedad de color para establecer el color de una leyenda en blanco con el fondo negro y algo de relleno también. El elemento de contenedor DIV interno se usa para establecer sus márgenes, visualización y propiedad de contenido justificar. El elemento TextAREA dentro de este contenedor se ha diseñado con el uso de la pantalla, la familia de fuentes, el tamaño de la fuente, el tamaño de la caja, el relleno, el ancho, el selecto del usuario, la altura y el cambio de tamaño de las propiedades.
La propiedad seleccionada del usuario para el área de texto y el cambio de tamaño se ha establecido en ninguno, yo.mi., Box no editable ni reacondicionable. El desplazamiento del flujo y el enfoque se ha utilizado para que TextARea utilice el fondo de color blanco sobre el flujo y el enfoque. Para las etiquetas de solo lectura de TextAREA, hemos estado configurando la bandeja de caja en ninguno y el color de fondo a blanco con 0 bordes. Esto es lo que se trata de este código. Vamos a ejecutarlo ahora.
La salida ha estado mostrando el FieldSet con el título "Información de envío de pedidos del cliente" junto con un contenedor que contiene un texto dentro de su TextAREA.
Puede ver que el subtítulo del Fieldset es editable, mientras que el texto se puede copiar y no es editable.
Conclusión
El párrafo introductorio de este artículo tiene que ver con el uso de CSS Readonly Selector en códigos HTML y explica su uso. Junto con eso, hemos discutido un total de tres ejemplos diferentes para hacer que un elemento sea simple de solo lectura mediante el uso de diferentes propiedades sobre el uso de un selector de lectura, i.mi., Readonly compensación, uso de la propiedad de los eventos del puntero y el uso del valor de desplazamiento contento dentro de la etiqueta de elemento particular.