342
Views
5
Comments
Can someone explain the statement: .Form textarea.ReadOnly:not(.Not_Valid)
Question

I had help from another individual with my CSS a bit and had the following line used:  Can someone explain the statement: .Form textarea.ReadOnly:not(.Not_Valid).  I understand that this is trying to select a textarea html object inside a form, but what is the "ReadOnly:not(.Not_Valid)" all about?

2021-04-08 11-10-22
EFreitas

That is when your element is editable.

If you set the property "enabled" to false, the css that you will see in the page is:

textarea[readonly="readonly"]

UserImage.jpg
Paul Bainter

The following code is all the CSS that I have to select my form inputs. I first set the disabled object borders to #ccc and then set the enabled element borders to black. When I run the page. the borders on all input elements are black.



SyntaxEditor Code Snippet

/* Disabled ~ NotSelected -    Border:Gray, Text:Gray, Background:White */
.Form textarea[readonly="readonly"],
.Form select[readonly="readonly"],
.Form input[type=text]:read-only, 
.Form input[type=number]:read-only, 
.Form input[type=email]:read-only, 
.Form input[type=search]:read-only{
    color: #ccc;
    border-bottom-color: #ccc;
    border-top-color: #ccc;
    border-right-color: #ccc;
    border-left-color: #ccc;
    background-color: #f2eded;
}


/* Enabled ~ NotSelected ~ NotRequired -    Border:Black, Text: Black, Background:White */
.Form textarea.ReadOnly:not(.Not_Valid),                        /*  NOT WORKING  */
.Form select.ReadOnly:not(.Not_Valid),                          /*  NOT WORKING  */
.Form input[type=text]:enabled, 
.Form input[type=number]:enabled, 
.Form input[type=email]:enabled, 
.Form input[type=search]:enabled{
    color: black;
    border-bottom-color: black;
    border-top-color: black;
    border-right-color: black;
    border-left-color: black;
}

 

What you are saying makes sense and clears up some questions for me, but the .ReadOnly:not(.Not_Valid) always seems to override the [readonly="readonly"] even when I put the first section after second section.  I took a look at the html with Inspect and on the html element that I marked "enabled = false" in the property window, I don't see a readonly="readonly" in the inspect window for that object.  The saga continues.


Thanks for your help,

Paul

UserImage.jpg
Paul Bainter

Sorry, I now see the readonly="readonly" in the inspect window, so now I don't know why the .Readonly:not(.Not_Valid) is overwriting it.

2021-04-08 11-10-22
EFreitas

.Readonly:not(.Not_Valid) this comes from the Theme BaseTheme.

.Form input.ReadOnly:not(.Not_Valid), 
.Form textarea.ReadOnly:not(.Not_Valid), 
.Form select.ReadOnly:not(.Not_Valid) {
    border-color: #e2e2e2;
}

It means that if you want to change the border-color, you need to overwrite this rules. 

2020-02-28 09-46-54
Eduardo Jauch

Hello Paul, 

As EFreitas hace mentioned, this comes from the base theme. 

The reason why it is overwritten your css is probably because of its specificity: https://www.w3schools.com/css/css_specificity.asp

So, to overwritten it, you need a more specific selector, or you need to use the same rule, later, with a different value for the desired attribute. 

In your case I think the first approach is probably what you want. 

Cheers 

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