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

Question

我目前正在稍微了解 HTML 和 CSS，但我无法理解如何使此表单按照我想要的方式运行。目标是让前三个字段保持其当前行为，但让主题和消息字段的大小适当并在它们自己的行上。

我已经尝试添加 divs，更改 class 上的显示和位置设置，并添加单独的 classes 以尝试定位我想要以不同方式表现的字段.

.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）。这将是表单顶行的 name/email/company 字段。
将 display 设置为 flex。一切看起来仍然是一样的 atm，所以：
从 .optin__form class 中删除 display: flex; - 您不需要 while 形式来弯曲，您现在只需要元素位于彼此之上。
将 display:block 和 width:100% 添加到 .optin-input。这会将输入元素推到允许的最大宽度。

您仍然需要对 spacing/paddings/margins 进行一些排序，但这应该会为您提供我认为您正在寻找的布局。

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

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

How to alter input field style and position inside a form

html

css

hugo