I have a challenge in creating a custom CSS property to disable an element without using the disabled keyword.
This is the code I came up with, but unfortunately, it did not achieve the desired result:
<style>
.admin {
color: green;
enable:
}
.user {
color: red;
--btn-disable: 0;
}
@property --btn-disable
{
syntax: '<number>';
cursor: not-allowed;
pointer-events: none;
/*Button disabled - CSS color class*/
color: #c0c0c0;
background-color: rgb(229, 229, 229) !important;
}
.btn-disabled
{
cursor: not-allowed;
pointer-events: none;
/*Button disabled - CSS color class*/
color: #c0c0c0;
background-color: rgb(229, 229, 229) !important;
}
</style>
<h1>{{.PageTitle}}</h1>
<ul>
{{range .Todos}}
<input class={{.Classes}}>{{.Title}}</li>
{{end}}
</ul>
When rendered, the template results in the following output:
<html><head><style>
.admin {
color: green;
enable:
}
.user {
color: red;
--btn-disable: 0;
}
@property --btn-disable
{
syntax: '<number>';
cursor: not-allowed;
pointer-events: none;
color: #c0c0c0;
background-color: rgb(229, 229, 229) !important;
}
.btn-disabled
{
cursor: not-allowed;
pointer-events: none;
color: #c0c0c0;
background-color: rgb(229, 229, 229) !important;
}
</style>
</head><body><h1>My TODO list</h1>
<ul>
<input class="admin btn-disabled">Task 1
<input class="user">Task 2
<input class="admin user">Task 3
</ul>
</body></html>
The first input is styled correctly using .btn-disabled, while the second input uses --btn-disabled and doesn't work as expected.
The third element combines both styles but still does not display as intended, possibly due to the order of style application.
Do you have any thoughts or suggestions on how to resolve this issue?