javascript - 宽度不能再扩大并与 CSS 中的其他宽度一起调整

Question

即使我做到了，我也无法在 css中的“ .selected”、“ .select-box .options-container.active”和“ ”中制作全尺寸的 witdh 。.search-box inputas width: 100%;

我想让“ Plase choose a category”文本字段、“ Search..”文本字段和“ 1,2,3,4,5..12”下拉列表的大小与“ Title” Condition、“ ”和“ Send”按钮的大小相同。

为了清楚起见，我希望所有文本字段、下拉列表和按钮的大小都相同。但是下拉列表和搜索框不能与其他对齐。

如果有人可以帮助我解决这个问题，我将不胜感激。

 const selected = document.querySelector(".selected");
const optionsContainer = document.querySelector(".options-container");
const searchBox = document.querySelector(".search-box input");

const optionsList = document.querySelectorAll(".option");

selected.addEventListener("click", () => {
  optionsContainer.classList.toggle("active");

  searchBox.value = "";
  filterList("");

  if (optionsContainer.classList.contains("active")) {
    searchBox.focus();
  }
});

optionsList.forEach(o => {
  o.addEventListener("click", () => {
    selected.innerHTML = o.querySelector("label").innerHTML;
    optionsContainer.classList.remove("active");
  });
});

searchBox.addEventListener("keyup", function(e) {
  filterList(e.target.value);
});

const filterList = searchTerm => {
  searchTerm = searchTerm.toLowerCase();
  optionsList.forEach(option => {
    let label = option.firstElementChild.nextElementSibling.innerText.toLowerCase();
    if (label.indexOf(searchTerm) != -1) {
      option.style.display = "block";
    } else {
      option.style.display = "none";
    }
  });
};

.login-page {
  width: 550px;
  padding: 5% 0 0;
  margin: auto;
}
.login-page .form .login{
  margin-top: -30px;
  margin-bottom: 5px;
}
.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 500px;
  margin: 0 auto 100px;
  padding: 35px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  border-radius: 5px;
}
.form input {
  font-family: "Arial";
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 1px solid; 
  margin: 0 0 20px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 15px;
  border-radius: 5px;
}
.form input:focus{
  outline: none;
    border:2px solid #08ac4b;
    box-shadow: 0 0 1px #08ac4b;
}

.form button {
  font-family: "Arial";
  text-transform: none;
  outline: 0;
  background-color: #08ac4b;
  width: 100%;
  border: 1px solid;
  padding: 15px;
  color: #ffffff;
  font-size: 15px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
  border-radius: 5px;
  margin: 0 0 20px;
}

.container {
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: 0 auto;
}
body {
  background-color: #ffffff;
  font-family: "Arial";
}
.select-box {
  display: flex;
  flex-direction: column;
}

.select-box .options-container {
  background: #ffffff;
  color: #000000;
  max-height: 0px;
  transition: all 0.4s;
  border-radius: 5px;
  overflow: hidden;
  order: 1;
}

.selected {
    content: "";
    font-family: "Arial";
    outline: none;
    border:1px solid;
  background: #ffffff;
  border-radius: 5px;
  margin-bottom: 8px;
  color: #000000;
  position: relative;
  order: 0;
  width: 100%;
}

.selected::after {
  content: "";
  background: url("img/arrow-down.svg");
  background-repeat: no-repeat;
  transition: all 0.4s;
}

.select-box .options-container.active {
  max-height: 240px;
  opacity: 1;
  overflow-y: scroll;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  font-family: "Arial";
  width: 100%;
}

.select-box .option,
.selected {
  padding: 15px;
  cursor: pointer;
}

.select-box .option:hover {
  background: #edf7f1;
}

.select-box label {
  cursor: pointer;
}

.select-box .option .radio {
  display: none;
}
/* Searchbox */

.search-box input {
    font-family: "Arial";
  outline: 0;
  background: #ffffff;
  box-sizing: border-box;
  font-size: 15px;
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s;
  width: 100%;
}

.search-box input:focus {
  outline: none;
  border:2px solid #08ac4b;
  box-shadow: 0 0 1px #08ac4b;
}

.select-box .options-container.active ~ .search-box input {
  opacity: 1;
  pointer-events: auto;
}

<div class="login-page">

      <div class="form">

        <div class="login">
          <div class="login-header">
            <h3>Post</h3>
            <p>Form</p>
          </div>

        </div>
        <form class="login-form">
          <input type="text" placeholder="Title"/>
          <input type="text" placeholder="Condition"/>


          <div class="container">
            <div class="select-box">
              <div class="options-container">
                <div class="option">
                  <input
                    type="radio"
                    class="radio"
                    id="automobiles"
                    name="category"
                  />
                  <label for="automobiles">1</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="film" name="category" />
                  <label for="film">2</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="science" name="category" />
                  <label for="science">3</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="art" name="category" />
                  <label for="art">4</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="music" name="category" />
                  <label for="music">5</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="travel" name="category" />
                  <label for="travel">6</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="sports" name="category" />
                  <label for="sports">7</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="news" name="category" />
                  <label for="news">8</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="tutorials" name="category" />
                  <label for="tutorials">9</label>
                </div>

                <div class="option">
                    <input type="radio" class="radio" id="tutorials" name="category" />
                    <label for="tutorials">10</label>
                  </div>
                  <div class="option">
                    <input type="radio" class="radio" id="tutorials" name="category" />
                    <label for="tutorials">11</label>
                  </div>
                  <div class="option">
                    <input type="radio" class="radio" id="tutorials" name="category" />
                    <label for="tutorials">12</label>
                  </div>
              </div>
              <div class="selected">
                Please choose a category
              </div>
              <div class="search-box">
                <input type="text" placeholder="Search..." />
              </div>
            </div>
          </div>
          <button>Send</button>
        </form>

      </div>

    </div>

标签： javascripthtmlcss

Answer 1

使用浏览器中的调试工具。如你看到的：

您设置了一个max-widthon 容器，因此它限制了.select. 还要使用box-sizing: border-boxon.selected以避免溢出。

const selected = document.querySelector(".selected");
const optionsContainer = document.querySelector(".options-container");
const searchBox = document.querySelector(".search-box input");

const optionsList = document.querySelectorAll(".option");

selected.addEventListener("click", () => {
  optionsContainer.classList.toggle("active");

  searchBox.value = "";
  filterList("");

  if (optionsContainer.classList.contains("active")) {
    searchBox.focus();
  }
});

optionsList.forEach(o => {
  o.addEventListener("click", () => {
    selected.innerHTML = o.querySelector("label").innerHTML;
    optionsContainer.classList.remove("active");
  });
});

searchBox.addEventListener("keyup", function(e) {
  filterList(e.target.value);
});

const filterList = searchTerm => {
  searchTerm = searchTerm.toLowerCase();
  optionsList.forEach(option => {
    let label = option.firstElementChild.nextElementSibling.innerText.toLowerCase();
    if (label.indexOf(searchTerm) != -1) {
      option.style.display = "block";
    } else {
      option.style.display = "none";
    }
  });
};

.login-page {
  width: 550px;
  padding: 5% 0 0;
  margin: auto;
}
.login-page .form .login{
  margin-top: -30px;
  margin-bottom: 5px;
}
.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 500px;
  margin: 0 auto 100px;
  padding: 35px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  border-radius: 5px;
}
.form input {
  font-family: "Arial";
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 1px solid; 
  margin: 0 0 20px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 15px;
  border-radius: 5px;
}
.form input:focus{
  outline: none;
    border:2px solid #08ac4b;
    box-shadow: 0 0 1px #08ac4b;
}

.form button {
  font-family: "Arial";
  text-transform: none;
  outline: 0;
  background-color: #08ac4b;
  width: 100%;
  border: 1px solid;
  padding: 15px;
  color: #ffffff;
  font-size: 15px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
  border-radius: 5px;
  margin: 0 0 20px;
}

.container {
  position: relative;
  z-index: 1;
  /*max-width: 300px;*/
  margin: 0 auto;
}
body {
  background-color: #ffffff;
  font-family: "Arial";
}
.select-box {
  display: flex;
  flex-direction: column;
}

.select-box .options-container {
  background: #ffffff;
  color: #000000;
  max-height: 0px;
  transition: all 0.4s;
  border-radius: 5px;
  overflow: hidden;
  order: 1;
}

.selected {
  box-sizing: border-box;
    content: "";
    font-family: "Arial";
    outline: none;
    border:1px solid;
  background: #ffffff;
  border-radius: 5px;
  margin-bottom: 8px;
  color: #000000;
  position: relative;
  order: 0;
  width: 100%;
}

.selected::after {
  content: "";
  background: url("img/arrow-down.svg");
  background-repeat: no-repeat;
  transition: all 0.4s;
}

.select-box .options-container.active {
  max-height: 240px;
  opacity: 1;
  overflow-y: scroll;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  font-family: "Arial";
  width: 100%;
}

.select-box .option,
.selected {
  padding: 15px;
  cursor: pointer;
}

.select-box .option:hover {
  background: #edf7f1;
}

.select-box label {
  cursor: pointer;
}

.select-box .option .radio {
  display: none;
}
/* Searchbox */

.search-box input {
    font-family: "Arial";
  outline: 0;
  background: #ffffff;
  box-sizing: border-box;
  font-size: 15px;
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s;
  width: 100%;
}

.search-box input:focus {
  outline: none;
  border:2px solid #08ac4b;
  box-shadow: 0 0 1px #08ac4b;
}

.select-box .options-container.active ~ .search-box input {
  opacity: 1;
  pointer-events: auto;
}

<div class="login-page">

      <div class="form">

        <div class="login">
          <div class="login-header">
            <h3>Post</h3>
            <p>Form</p>
          </div>

        </div>
        <form class="login-form">
          <input type="text" placeholder="Title"/>
          <input type="text" placeholder="Condition"/>


          <div class="container">
            <div class="select-box">
              <div class="options-container">
                <div class="option">
                  <input
                    type="radio"
                    class="radio"
                    id="automobiles"
                    name="category"
                  />
                  <label for="automobiles">1</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="film" name="category" />
                  <label for="film">2</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="science" name="category" />
                  <label for="science">3</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="art" name="category" />
                  <label for="art">4</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="music" name="category" />
                  <label for="music">5</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="travel" name="category" />
                  <label for="travel">6</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="sports" name="category" />
                  <label for="sports">7</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="news" name="category" />
                  <label for="news">8</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="tutorials" name="category" />
                  <label for="tutorials">9</label>
                </div>

                <div class="option">
                    <input type="radio" class="radio" id="tutorials" name="category" />
                    <label for="tutorials">10</label>
                  </div>
                  <div class="option">
                    <input type="radio" class="radio" id="tutorials" name="category" />
                    <label for="tutorials">11</label>
                  </div>
                  <div class="option">
                    <input type="radio" class="radio" id="tutorials" name="category" />
                    <label for="tutorials">12</label>
                  </div>
              </div>
              <div class="selected">
                Please choose a category
              </div>
              <div class="search-box">
                <input type="text" placeholder="Search..." />
              </div>
            </div>
          </div>
          <button>Send</button>
        </form>

      </div>

    </div>