Styling options in "select" element using :has() pseudo class

I am trying to style my box bg color according to the selection made in select element. The challenge is to use :has() pseudo class here. I've went through that line of code for a few times now, and it doesn't correspond to what is chosen in the options... What am I doing wrong here?

Here is an image of what I'm working on

HTML code snippet

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="testing.css">
</head>

<body>
    <div class="selections">
        <select name="" id="" class="options">
            <option value="green">Green colour</option>
            <option value="red">Red colour</option>
            <option value="blue">Blue colour</option>
            <option value="yellow">Yellow colour</option>
        </select>
    </div>

    <div class="parentBox">
        <div class="box">box</div>
    </div>
</body>

</html>

CSS code snippet

.selections {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30vh;
}

.options {
    width: 30%;
    height: 30%;
}

.parentBox {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40vh;
}

.box {
    box-shadow: 8px 8px 32px;
    width: 50%;
    height: 50%;
}

.selections:has(select > option[value="green"])+.parentBox>.box{
    background-color: limegreen;
    box-shadow: -8px -8px 16px darkgreen;
}

.selections:has(select > option[value="red"])+.parentBox>.box{
    background-color: firebrick;
    box-shadow: -8px -8px 16px red;
}

Codepen: https://codepen.io/Rabbit0929/pen/ZEoKYQE

Solution

You need to add the :checked pseudo-class so that the style is applied only for the selected option:

https://codepen.io/jimmys20/pen/oNdWxrr

.selections {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30vh;
}

.options {
    width: 30%;
    height: 30%;
}

.parentBox {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40vh;
}

.box {
    box-shadow: 8px 8px 32px;
    width: 50%;
    height: 50%;
}

.selections:has(select > option[value="green"]:checked)+.parentBox>.box{
    background-color: limegreen;
    box-shadow: -8px -8px 16px darkgreen;
}

:root {
  --bg-color: transparent;
  --shadow-color: transparent;
}

.parentBox > .box {
  background-color: var;
    box-shadow: -8px -8px 16px red;
}

.selections:has(select > option[value="red"]:checked)+.parentBox>.box{
    background-color: firebrick;
    box-shadow: -8px -8px 16px red;
}

<body>
    <div class="selections">
        <select name="" id="" class="options">
            <option value="green">Green colour</option>
            <option value="red">Red colour</option>
            <option value="blue">Blue colour</option>
            <option value="yellow">Yellow colour</option>
        </select>
    </div>

    <div class="parentBox">
        <div class="box">box</div>
    </div>
</body>