0

Tengo un formulario en donde tengo un select en donde muestra las prioridades, por ejemplo (Urgente, alta, etc.) y quisiera seleccionar desde css el select y un atributo para así darle un color, esto es lo que intente hasta ahora pero no me funciona

divShow.innerHTML += `
    <div>
        <p>${title} - <span class="priority">${prioritySelect}</span></p>
        <p>${description}</p> 
        <p>${datetimeInput}</p>
        <a class="dele-boton" onClick="deleteTasks('${title}')">Delete</a> 
    </div>`

Y quiero obtener en css el atributo "Urgente" para darle un color

.priority option[value="Urgente"] {
    color: red;
}

Como lo podría hacer, gracias de antemano por su ayuda...

1
  • Ese es el javascript y ahi estoy mostrando los valores que el usuario eligió y en el html hay una sección que es para elegir las prioridades de las tareas y esos ya tiene un color, pero cuando muestro las tareas ya creadas, alado del titulo quiero que muestre la prioridad que eligió el usuario, que ya lo hace pero quiero ponerle color también, espero que mi explicación sea bastante entendible Commented el 26 jul. 2023 a las 0:35

1 respuesta 1

2

Puedes hacerlo con los data-attributes, en el CSS:

[data-priority="Urgente"] {
  color: red;
}

Para ello solo tendrías que actualizar el HTML del siguiente modo:

<span class="priority" data-priority="${prioritySelect}">
   ${prioritySelect}
</span>
1
  • 1
    Si me funciono muchas gracias por la ayuda... Commented el 27 jul. 2023 a las 3:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.