如何限制checkbox触发范围：仅点击指定按钮时打开下拉菜单

问题核心是**标签的默认行为**——点击内部的任意区域都会触发其关联的控件状态切换，而你的粉色区域正是的背景，所以点击它也会展开下拉。

纯HTML/CSS解决方案 #

调整结构，将粉色区域改为独立容器，让仅包裹触发按钮和关联的复选框，这样只有点击红色按钮才会触发下拉：

修改后的HTML代码

<div class="language dropdown" style="background-color: pink">
  <label for="test">
    <div class="dd-button"> Change Language </div>
  </label>
  <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>
</div>

修改后的CSS代码（仅调整容器样式，其余保留）

/* 原label的样式移到新的div容器上 */
div.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;
    }
}

关键修改说明 #

1. 将原<label>替换为<div>作为粉色容器，把真正的<label>缩小到仅包裹红色按钮，并通过for="test"关联复选框ID，保持按钮与复选框的联动。
2. 原label的CSS样式同步转移到新的div容器上，保证视觉效果不变。

可选JavaScript方案（如果不想调整结构） #

如果需要保留原HTML结构，可以通过JS阻止label非按钮区域的点击行为：

document.querySelector('.language.dropdown').addEventListener('click', function(e) {
  if (!e.target.closest('.dd-button')) {
    e.preventDefault();
  }
});

这段代码会判断点击目标是否是按钮或按钮内部元素，若不是则阻止label的默认触发行为。

内容的提问来源于stack exchange，提问作者Aashish Kumar Jaiswal