如何更改表单中的输入字段样式和位置

Question

我目前正在接触HTML和CSS，但很难理解如何使这个表单按照我想要的方式运行。目标是使前三个字段保持其当前行为，但使"主题"和"消息"字段的大小适当且位于其自己的行上。

我尝试添加div，更改类上的显示和位置设置，并添加单独的类以尝试定位我想要表现不同的字段。

.optin {
    background-color: #F7F9FA;
    border-radius: 5px;
    padding: 40px 70px 20px;
    box-shadow: 0px 20px 40px 0px rgba(61, 65, 84, 0.15); }
    .optin__title {
        font-size: 20px;
        margin-bottom: 32px; }
    .optin__form {
        display: flex; }
    .optin__form-group--active > label {
        top: -20px;
        font-size: 14px;
        color: #FA6262; }
    .optin .form-group {
        flex: 1 0 0;
        margin-right: 20px;
        margin-bottom: 20px; }
    .optin__label {
        position: absolute;
        font-weight: 500;
        font-size: 15px;
        top: 12px;
        left: 0;
        pointer-events: none;
        transition: all 0.2s ease-in-out; }
    .optin__input {
        padding: 0;
        margin-bottom: 0;
        font-size: 15px;
        font-weight: 500;
        background-color: transparent;
        border: 0;
        border-radius: 0;
        border-bottom: 1px solid #D5D9ED; }
        .optin__input:focus {
            background-color: transparent; }
        .optin__input:focus ~ label {
            top: -20px;
            font-size: 14px;
            color: #FA6262; }
    @media only screen and (max-width: 767px) {
        .optin {
            padding: 30px; }
            .optin__form {
                display: block; } }

          <div class="optin">
            <h3 class="optin__title">{{ .Site.Params.home.formtitle }}</h3>
            <form class="optin__form">
              <div class="optin__form-group form-group">                    
                <input type="text" class="form-input optin__input" id="optin-name" required>
                <label for="optin-name" class="optin__label">{{ .Site.Params.home.formname }}</label>
                <span class="input-underline"></span>
              </div>
              <div class="optin__form-group form-group">
                <input type="email" class="form-input optin__input" id="optin-email" required>
                <label for="optin-email" class="optin__label">{{ .Site.Params.home.formemail }}</label>
                <span class="input-underline"></span>
              </div>
              <div class="optin__form-group form-group">
                <input type="text" class="form-input optin__input" id="optin-company">
                <label for="optin-company" class="optin__label">{{ .Site.Params.home.formcompany }}</label>
                <span class="input-underline"></span>
              </div>
              <div class="optin__form-group form-group">
                <input type="text" class="form-input optin__input" id="optin-company">
                <label for="optin-subject" class="optin__label">{{ .Site.Params.home.formsubject }}</label>
                <span class="input-underline"></span>
              </div>
              <div class="optin__form-group form-group">
                <input type="text" class="form-input optin__input" id="optin-company">
                 <label for="optin-message" class="optin__label">{{ .Site.Params.home.formsubject }}</label>
                <span class="input-underline"></span>
              </div>
              <button class="optin__btn btn btn--md btn--color btn--button">{{ .Site.Params.home.formsubmit }}</button>                 
            </form>
          </div>

将 CSS 中的.optin__form更改为 display: relative 给了我所需的行为，但不幸的是将其应用于所有字段。

Answer 1

您能否添加和修改您的样式，如下所示

.optin .form-group {
    position: relative;
}
.optin__title {
    margin-bottom: 70px;
}
.optin__input:focus ~ label {
    top: -45px;
}

Answer 2

有几个选项，所有这些选项都相当容易。这是一个[我认为从你的描述来看是你想要的]：

• 将前三个项目放在它们自己的div 中(我称之为 optin__form-row (。这将是表单顶行的姓名/电子邮件/公司字段。
• 将display设置为flex。一切看起来仍然是一样的 atm，所以：
• 从.optin__form类中删除display: flex; - 您不需要 while 表单来弯曲，您现在只希望元素彼此重叠。
• 将display:block和width:100%添加到.optin-input。这会将输入元素推送到允许的全宽。

您

仍然需要对间距/填充/边距进行一些排序，但这应该为您提供我认为您正在寻找的布局。

.optin {
  background-color: #f7f9fa;
  border-radius: 5px;
  padding: 40px 70px 20px;
  box-shadow: 0px 20px 40px 0px rgba(61, 65, 84, 0.15);
}
.optin__title {
  font-size: 20px;
  margin-bottom: 32px;
}
.optin__form-row {
  display: flex;
  width: 100%;
}
/* NOTE I changed this from .optin .form-group
 * to `optin__form-group & added relative positioning: */
.optin__form-group {
  flex: 1 0 0;
  margin-right: 20px;
  margin-bottom: 20px;
  position: relative;
}
.optin__form-group--active > label {
  top: -20px;
  font-size: 14px;
  color: #fa6262;
}
.optin__label {
  position: absolute;
  font-weight: 500;
  font-size: 15px;
  top: 12px;
  left: 0;
  pointer-events: none;
  transition: all 0.2s ease-in-out;
}
.optin__input {
  padding: 0;
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 500;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #d5d9ed;
  display: block;
  width: 100%;
}
.optin__input:focus {
  background-color: transparent;
}
.optin__input:focus ~ label {
  top: -20px;
  font-size: 14px;
  color: #fa6262;
}
/* NOTE I'm just commenting this out for the purposes of
 * the snippet:
@media only screen and (max-width: 767px) {
  .optin {
    padding: 30px;
  }
  .optin__form {
    display: block;
  }
}
*/

<div class="optin">
  <h3 class="optin__title">Form Title</h3>
  <form class="optin__form">
    <div class="optin__form-row">
    <div class="optin__form-group form-group">
      <input type="text" class="form-input optin__input" id="optin-name" required>
      <label for="optin-name" class="optin__label">Name</label>
      <span class="input-underline"></span>
    </div>
    <div class="optin__form-group form-group">
      <input type="email" class="form-input optin__input" id="optin-email" required>
      <label for="optin-email" class="optin__label">Email</label>
      <span class="input-underline"></span>
    </div>
    <div class="optin__form-group form-group">
      <input type="text" class="form-input optin__input" id="optin-company">
      <label for="optin-company" class="optin__label">Company</label>
      <span class="input-underline"></span>
    </div>
    </div>
    <div class="optin__form-group form-group">
      <input type="text" class="form-input optin__input" id="optin-company">
      <label for="optin-subject" class="optin__label">Subject</label>
      <span class="input-underline"></span>
    </div>
    <div class="optin__form-group form-group">
      <input type="text" class="form-input optin__input" id="optin-company">
      <label for="optin-message" class="optin__label">Subject</label>
      <span class="input-underline"></span>
    </div>
    <button class="optin__btn btn btn--md btn--color btn--button">Submit</button>
  </form>
</div>