Search code examples
htmlcssselectdrop-down-menudropdownbox

My custom dropdown/ select menu is having border problems

I am trying to make a custom dropdown box / select menu that allows me to have rounded options. I have it nearly done, but there is a glitch in the side of it:

Strange line glitch

Here is my code:

<!DOCTYPE html>
<html>
<head>
  <title>Custom Select</title>
  <style>
    .custom-select {
      position: relative;
      display: inline-block;
    }

    .select-selected {
      background-color: white;
      color: black;
      padding: 10px;
      padding-right: 9px;
      border: 1px solid gray;
      border-radius: 10px;
      cursor: pointer;
    }

    .select-items {
      display: none;
      position: absolute;
      background-color: white;
      border: 1px solid gray;
      border-top: none;
      border-radius: 0 0 10px 10px;
      z-index: 999;
      width: 100%;
    }

    .select-items div {
      padding: 10px;
      cursor: pointer;
    }

    .select-items div:hover {
      background-color: lightgray;
      border-radius: 10px;
    }

    .select-selected.active {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  </style>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const customSelect = document.querySelector(".custom-select");
      const selectSelected = customSelect.querySelector(".select-selected");
      const selectItems = customSelect.querySelector(".select-items");
      const optionDivs = selectItems.querySelectorAll("div");

      selectSelected.addEventListener("click", function() {
        if (selectItems.style.display === "none") {
          selectItems.style.display = "block";
          selectSelected.classList.add("active");
        } else {
          selectItems.style.display = "none";
          selectSelected.classList.remove("active");
        }
      });

      optionDivs.forEach(function(div) {
        div.addEventListener("click", function() {
          const selectedOptionText = div.textContent;
          selectSelected.textContent = selectedOptionText;
          selectItems.style.display = "none";
          selectSelected.classList.remove("active");
        });
      });

      document.addEventListener('click', function(e) {
        if (!customSelect.contains(e.target)) {
          selectItems.style.display = 'none';
          selectSelected.classList.remove("active");
        }
      });
    });
  </script>
</head>
<body>
  <div class="custom-select">
    <div class="select-selected">Select an option</div>
    <div class="select-items">
      <div>Option 1</div>
      <div>Option 2</div>
      <div>Option 3</div>
    </div>
  </div>
</body>
</html>

I tried several "Code fixers", which didn't work at all. Then I tried changin the padding-right values, margins, and several other style realted things. I can't figure this out. Any solutions?

Solution

  • You can solve the problem by changing the default value of box-sizing property to border-box like this:

              box-sizing: border-box;

    or by adding it directly to your.select-items class.