Enable-Disable Button CSS Behavior
Service Studio Version
11.11.11 (Build 47088)

Hi All,


we are making some css modification for our disabled button to be more presentable when its disabled. 

desired behavior is: button active = yellow background and gray for disabled.

unfortunately we can't do it via coding since this should be implemented to other pages also.

here is our css code:

.input[type=button][disabled] {
    color: #ADB5BD;
    background-color: #F1F3F5;
    border-color: #DEE2E6;
    border-style: solid;
    border-width: 2px;
}

but it doesn't take effect for disabled buttons.


here is the buttons property:

current behavior is if the button is disabled: You may notice that the difference only is enabled button has border and disabled doesn't.


I think the problem is that you have inline style applied for this button, which in CSS rules will always take priority over css selectors. You should apply this overall button style through the style sheet

input[type=submit] {

    background-color: #FFE600;
    border-width: 1px;
    border-style:solid ;
    color: #2e2e38;
    margin-left:0px;
}


 so that it can be overridden when you select the disabled buttons through the style sheet

Yes it works now followed what you mention I applied it in the parent css file but only the disabled status. then added the overridden !important code as the color of the button to force the color gray thing.

How to Override CSS Styles


Thank you very much again!. 

Solution

Hello d cabral,

I have tried the same it works for me

1. Add the css

2.In developer roll

Please refer the attached url and oml

Regards,

Ellakkiya.S


forumtest.oml

have you tried using the selector "button[disabled]" instead?

tried it but still doesn't work. kinda hard to test in OS Studio since its quite slow when publishing and compiling thou.

Hello d cabral,

Kindly add the below css

input[type=submit][disabled="disabled"],
input[type=submit][readonly="readonly"]
{
    background-color: #457ca0;
    border: 1px solid var(--color-neutral-4);
    color: var(--color-neutral-6);
    pointer-events: none;
}

Hope this helps!

Regards,

Ellakkiya.S

Hi Ella,


tried both with and without the [dot] 

Still the button doesn't change to correct css.


I inspect the element and it seems the background color and color are being ignored.

any idea how to enforce it to apply and ignore what's inside the element.style? 

Solution

Hello d cabral,

I have tried the same it works for me

1. Add the css

2.In developer roll

Please refer the attached url and oml

Regards,

Ellakkiya.S


forumtest.oml

It looks like you set the color in the css editor in OS. 

This means the color is set inline (html), which has higher specificity than CSS classes.

Yes it works now followed and troubledshoot what you shared file and what Margarida mentioned I applied it in the parent css file but only the disabled status. then added the overridden !important code as the color of the button to force the color gray thing.

How to Override CSS Styles


Thank you very much again!. you two were a big help

Thanks for mentioning this thing it helps me how to overriden the other class from the hierarchy

I think the problem is that you have inline style applied for this button, which in CSS rules will always take priority over css selectors. You should apply this overall button style through the style sheet

input[type=submit] {

    background-color: #FFE600;
    border-width: 1px;
    border-style:solid ;
    color: #2e2e38;
    margin-left:0px;
}


 so that it can be overridden when you select the disabled buttons through the style sheet

Yes it works now followed what you mention I applied it in the parent css file but only the disabled status. then added the overridden !important code as the color of the button to force the color gray thing.

How to Override CSS Styles


Thank you very much again!. 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.