How can I set a parent element’s style based on its child’s attributes in CSS?

Question

For example when input is disabled, parent element should have Black background otherwise White.

<div><input type="text" disabled="disabled" /></div>

div input[type="text", disabled="disabled"] {
    background: Black;
}

I want to style parent element instead of child.

Answer 1

You can select this elements parent with css has selector;

For Example;

Lats say we have an div and div have inside to input element;

.hasan-ablak {
            padding: 5px;
            background-color: green;
        }

.hasan-ablak:has(input:disabled) {
  background-color: orange;
}
.hasan-ablak:has(input:disabled) {
            background-color: red;
        }

<div class="hasan-ablak">
            <input type="text">
</div>
    
<div class="hasan-ablak">
  <input type="text" disabled>
</div>

Answer 2

Not possible using CSS.

It is possible with JavaScript though.