CSS for Enabled textarea that is required

I have the following code:

SyntaxEditor Code Snippet

/* Enabled ~ NotSelected ~ Required - 
Border:Red, Text: Black, Background:White */
.Form textarea.Mandatory,               /*  NOT WORKING  */
.Form select.Mandatory,                 /*  NOT WORKING  */
.Form input[type=text].Mandatory,
.Form input[type=number].Mandatory,
.Form input[type=email].Mandatory, 
.Form input[type=search].Mandatory
{
    border-bottom-color: red;
    border-top-color: red;
    border-right-color: red;
    border-left-color: red;
}

I need to set the color for a textarea and combobox(select) when it it enabled and marked as Mandatory, but is not the selected object.  The above CSS code works except for the 2 lines for the textarea and select object. Any help would be greatly appreciated.

TIA

Hello Paul,

If you inspect the element you can see that border color is overwritten by 

.layout .Form .input.ReadOnly:not(.Not_Valid),
.layout .Form .select.ReadOnly:not(.Not_Valid)


change to this:

.layout .Form .input.Mandatory.ReadOnly:not(.Not_Valid),
.layout .Form .select.Mandatory.ReadOnly:not(.Not_Valid),

.Form input[type=text].Mandatory,
.Form input[type=number].Mandatory,
.Form input[type=email].Mandatory, 
.Form input[type=search].Mandatory
{
    border-color: red;
}


You can also use border-color only.

Paul Bainter wrote:

I have the following code:

SyntaxEditor Code Snippet

/* Enabled ~ NotSelected ~ Required - 
Border:Red, Text: Black, Background:White */
.Form textarea.Mandatory,               /*  NOT WORKING  */
.Form select.Mandatory,                 /*  NOT WORKING  */
.Form input[type=text].Mandatory,
.Form input[type=number].Mandatory,
.Form input[type=email].Mandatory, 
.Form input[type=search].Mandatory
{
    border-bottom-color: red;
    border-top-color: red;
    border-right-color: red;
    border-left-color: red;
}

I need to set the color for a textarea and combobox(select) when it it enabled and marked as Mandatory, but is not the selected object.  The above CSS code works except for the 2 lines for the textarea and select object. Any help would be greatly appreciated.

TIA

Hi Paul, 


You may just use this css to override.


.Form textarea.Mandatory,    
.Form select.Mandatory,                
.Form input[type=text].Mandatory,
.Form input[type=number].Mandatory,
.Form input[type=email].Mandatory, 
.Form input[type=search].Mandatory
{
    border: solid 1px red !important;
}

I like changing the 4 border statements into just the 1 statement.  However, for some reason neither of these selectors will select my textarea or select objects.  It's a mystery.  Thanks for your help, I will keep at it and eventually conquer.  I'm sure it has to do with possibly the order or other statements. Thank you

Have you already inspect the TextArea element to check the class?

click inside the TextArea with the right-button and then inspect. Or share the page.

You need to add this class rule:

.Form textarea.Mandatory.ReadOnly:not(.Not_Valid)