{"id":13022,"date":"2019-02-28T15:23:53","date_gmt":"2019-02-28T23:23:53","guid":{"rendered":"http:\/\/clartechsolutions.com\/?p=13022"},"modified":"2023-03-01T02:02:59","modified_gmt":"2023-03-01T02:02:59","slug":"agregar-estilos-a-los-items-text-y-texarea-del-formulario-en-apex-18-x","status":"publish","type":"post","link":"https:\/\/kiusi.com\/en\/agregar-estilos-a-los-items-text-y-texarea-del-formulario-en-apex-18-x\/","title":{"rendered":"Agregar estilos a los Items Text y Texarea del Formulario en APEX 18.x"},"content":{"rendered":"

En esta entrega quiero compartir una pregunta que un alumno me hizo sobre c\u00f3mo puede agregar un color de fondo amarillo a los campos de textos de un formulario para que el usuario identifique exactamente donde se encuentra dentro del formulario.<\/p>\n

Si abrimos el formulario en modo ejecuci\u00f3n y nos posesionamos en un campo de texto de nuestro formulario, y luego usamos el Inspector del Browser, en mi caso estoy usando el Chrome, podemos ver los estilos CSS aplicados en el elemento:<\/p>\n

\"\"<\/p>\n

Aqu\u00ed no podemos ver el focus del elemento para ello necesitamos forzar el focus en el Inspector, entonces, hacemos clic en :show y se despliega los Force element state y tildamos el focus:<\/p>\n

\"\"<\/p>\n

De esa forma vemos las clases que intervienen para poder cambiar el color de fondo y el borde tanto del campo de texto como del campo de \u00e1rea.<\/p>\n

.apex-item-select:focus, <\/span>.apex-item-text:focus, <\/span>.apex-item-textarea:focus<\/span><\/span> {<\/p>\n

\n
\n
    \n
  1. background-color<\/span>: #fff!important<\/span>;<\/li>\n
  2. border-color<\/span>: #0572CE!important<\/span>;<\/li>\n<\/ol>\n<\/div>\n<\/div>\n
    }<\/div>\n
    \n
    <\/div>\n
    Ahora simplemente vamos a la p\u00e1gina donde tenemos nuestro formulario y agregamos esta regla CSS en CSS Inline:<\/div>\n
    <\/div>\n

    .apex-item-select:focus, .apex-item-text:focus, .apex-item-textarea:focus {
    \nbackground-color: yellow !important;
    \nborder-color: red !important;
    \n}<\/p>\n

    Guardamos y ejecutamos para ver el resultado:<\/p>\n<\/div>\n

    <\/div>\n
    \n