我有一个按钮改变语言，当点击，它打开列表<ul class="dd-menu">。但即使我点击外面（粉红色区域）改变语言，它的工作，我想避免。
我希望它只有在单击红色的更改语言按钮<div class="dd-button">时才能工作（打开列表）。

label.language.dropdown {
    display: block;
    position: relative;
    text-align: -webkit-center;
    margin-bottom: 8px;
    margin-top: 15px;
}

.dd-button {
    display: block;
    border: 1px solid white;
    border-radius: 4px;
    padding: 8px 18px 8px 18px;
    background-color: red;
    cursor: pointer;
    white-space: nowrap;
    width: fit-content;
}

.dd-button:hover {
    background-color: green;
}

.dd-input {
    display: none;
}

.dd-menu {
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
    background-color: var(--box-clr);
    list-style-type: none;
    width: fit-content;
    position: absolute;
    top: 50%;
    text-align: justify;
}

.dd-input+.dd-menu {
    display: none;
}

.dd-input:checked+.dd-menu {
    display: block;
}

.dd-menu li {
    padding: 10px 20px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    width: 30%;
}

.dd-menu li:hover {
    background-color: grey;
}

.dd-menu li a {
    display: block;
    margin: -10px -20px;
    padding: 10px 20px;
}
span.closebutton {
    color: var(--black-clr);
    position: absolute;
    top: -5%;
    background: var(--main-clr);
    padding: 6px 10px 10px 10px;
    border-radius: 100%;
    right: -3%;
    line-height: 12px;
    vertical-align: inherit;
    font-size: 20px;
    cursor: pointer
}
@media(min-width:750px){
    .dd-menu {
        width: 45%;
        left: 27.1% ;
    }
}
@media(min-width: 1650px) {
    .dd-menu {
        max-width: 23%;
        left: 38.1% !important;
    }
}

<label class="language dropdown" style="background-color: pink">
    <div class="dd-button"> Change Language
    </div>
  <input type="checkbox" class="dd-input" id="test">
    <ul class="dd-menu">
      <li>
         Hindi
      </li>
       <li>
         English
      </li>
       <li>
         Spanish
      </li>
    </ul>
   <span class="closebutton">x</span>
</label>