How to avoid input checkbox work in whole division except the targeted-CodePudding

I have a button Change Language, when clicked, it opens lists <ul >. But even I click out side (Pink area) the Change Language, it works which I want to avoid.

I want it to work (open the lists) only when clicking the red Change Language button <div >.

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  style="background-color: pink">
    <div > Change Language
    </div>
  <input type="checkbox"  id="test">
    <ul >
      <li>
         Hindi
      </li>
       <li>
         English
      </li>
       <li>
         Spanish
      </li>
    </ul>
   <span >x</span>
</label>

CodePudding user response：

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;
}

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
}

.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;
}

@media(min-width:750px) {
  .dd-menu {
    width: 45%;
    left: 27.1%;
  }
}

@media(min-width: 1650px) {
  .dd-menu {
    max-width: 23%;
    left: 38.1% !important;
  }
}

<div  style="background-color: pink">
  <label for="test" > Change Language
    </label>
  <input type="checkbox"  id="test">
  <ul >
    <li>
      Hindi
    </li>
    <li>
      English
    </li>
    <li>
      Spanish
    </li>
    <span >x</span>
  </ul>
</div>

The thing you need to know is how label works, The for attribute in label must match the value of the id attribute of checkbox. When absent, the label is associated with the element’s content [That's what happened on your html] . Also, note that the id should be unique on the page.if you didn't understand anything plz ask