框大小的边框框无法按需工作

时间：2019-01-31 09:08:06

标签： html css

代码：https://codepen.io/sshiling/pen/LqxLJg
在第一种情况下，边框会根据需要工作。
在第二种情况下，没有，并且我的输入字段退出了表单。 当我删除输入字段的填充时，它们不会退出。 但是我需要为它们中的每一个填充。

Image 

.modal-search__input,
.modal-login__email,
.modal-login__password {
  font-size: 14px;
  line-height: 24px;
}

.modal-search__form {
  width: 345px;
  height: 85px;
  background-color: #f8f7f4;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 0 10px;
}

.modal-search__input {
  margin: 19px 0;
  padding: 10px;
  border-radius: 5px;
  width: 100%;
  border: 1px solid #d3d3d2;
}

.modal-login__form {
  width: 275px;
  height: 215px;
  background-color: #f8f7f4;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 10px;
  margin: 20px 0;
}

.modal-login__email,
.modal-login__password {
  padding: 10px;
  border-radius: 5px;
  width: 100%;
  border: 1px solid #d3d3d2;
}
<section class="modal modal-search visually-hidden">
      <form action="" class="modal-search__form">
        <p><input class="modal-search__input" type="search" name="q" placeholder="Search" id="modal-search__input-field"></p>
      </form>
    </section>

    <section class="modal modal-login visually-hidden">
      <form action="#" method="post" class="form modal-login__form">
        <p><input type="email" value="" placeholder="Email" class="modal-login__email" id="modal-login__email-field" required></p>
        <p><input class="modal-login__password" type="password" value="" placeholder="Password" id="modal-login__password-field" required></p>
        <button class="button modal-login__button">Login</button>
        <p><a class="modal-login__link" href="#">Forgot password?</a></p>
        <p><a class="modal-login__link" href="#">Registration</a></p>
      </form>
</section>

5 个答案:

答案 0 :(得分：1)

默认情况下，类型为search的

输入将获取box-sizing: border-box，而其他类型则没有。您必须为其他类型指定边框。

.modal-search__input,
.modal-login__email,
.modal-login__password {
  font-size: 14px;
  line-height: 24px;
}

.modal-search__form {
  width: 345px;
  height: 85px;
  background-color: #f8f7f4;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 0 10px;
}

.modal-search__input {
  margin: 19px 0;
  padding: 10px;
  border-radius: 5px;
  width: 100%;
  border: 1px solid #d3d3d2;
}

.modal-login__form {
  width: 275px;
  height: 215px;
  background-color: #f8f7f4;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 10px;
  margin: 20px 0;
}

.modal-login__email,
.modal-login__password {
  padding: 10px;
  border-radius: 5px;
  width: 100%;
  border: 1px solid #d3d3d2;
  box-sizing: border-box;
}
<section class="modal modal-search visually-hidden">
  <form action="" class="modal-search__form">
    <p><input class="modal-search__input" type="search" name="q" placeholder="Search" id="modal-search__input-field"></p>
  </form>
</section>

<section class="modal modal-login visually-hidden">
  <form action="#" method="post" class="form modal-login__form">
    <p><input type="email" value="" placeholder="Email" class="modal-login__email" id="modal-login__email-field" required></p>
    <p><input class="modal-login__password" type="password" value="" placeholder="Password" id="modal-login__password-field" required></p>
    <button class="button modal-login__button">Login</button>
    <p><a class="modal-login__link" href="#">Forgot password?</a></p>
    <p><a class="modal-login__link" href="#">Registration</a></p>
  </form>
</section>

答案 1 :(得分：0)

使用此

* {
  box-sizing: border-box;
}

答案 2 :(得分：0)

您应该为modal-login__email和modal-login__password赋予框大小样式，而不是modal-login__form 

.modal-login__form {
    width: 275px;
    height: 215px;
    background-color: #f8f7f4;
    border-radius: 5px;
    padding: 10px;
    margin: 20px 0;
}

.modal-login__email,
.modal-login__password {
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    border: 1px solid #d3d3d2;
  box-sizing: border-box;
}

答案 3 :(得分：0)

试试这一个，我认为这是采用全给你，首先你应得给的高度：自动; 为 .modal-login__form 类内容会不会从部分和箱上浆四溢：边界盒; 其工作的 .modal-login__form 如果您想覆盖的电子邮件和密码输入你的类必须为 .modal-login__email 和 .modal-login__password 提供 box-sizing：border-box; 课。

.modal-search__input,
.modal-login__email,
.modal-login__password {
    font-size: 14px;
    line-height: 24px;
}
.modal-search__form {
    width: 345px;
    height: 85px;
    background-color: #f8f7f4;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 0 10px;
}

.modal-search__input {
    margin: 19px 0;
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    border: 1px solid #d3d3d2;
}

.modal-login__form {
    width: 275px;
    height: auto;
    background-color: #f8f7f4;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 10px;
    margin: 20px 0;
}

.modal-login__email,
.modal-login__password {
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    border: 1px solid #d3d3d2;
    box-sizing: border-box;
}
<section class="modal modal-search visually-hidden">
  <form action="" class="modal-search__form">
  <p><input class="modal-search__input" type="search" name="q" placeholder="Search" id="modal-search__input-field"></p>
    </form>
</section>

<section class="modal modal-login visually-hidden">
  <form action="#" method="post" class="form modal-login__form">
    <p><input type="email" value="" placeholder="Email"     class="modal-login__email" id="modal-login__email-field" required>   </p>
    <p><input class="modal-login__password" type="password" value="" placeholder="Password" id="modal-login__password-field" required></p>
    <button class="button modal-login__button">Login</button>
    <p><a class="modal-login__link" href="#">Forgot password</a></p>
    <p><a class="modal-login__link" href="#">Registration</a></p>
  </form>
</section>

答案 4 :(得分：0)

但是为什么会这样呢？在第一种情况下，它在输入字段没有边框的情况下起作用，而在第二种情况下，则没有。

因为在第一种情况下，输入框的类型是搜索。不同类型的输入框会导致

相关问题
最新问题