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

时间：2019-07-19 08:39:47

标签： html css hugo

我目前正在接触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，这为我提供了所需的行为，但不幸的是将其应用于所有字段。

2 个答案:

答案 0 :(得分：1)

您能否按照下面的说明添加和修改样式

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

答案 1 :(得分：0)

有几个选项，所有这些都很容易。这是一个[我认为您的描述就是您所追求的]：

  • 将前三个项目放在自己的div中（我称之为optin__form-row）。这将是表单顶部行中的名称/电子邮件/公司字段。
  • 为此设置display至flex。一切仍然看起来像是atm，所以：
  • 从display: flex;类中删除.optin__form-您不需要用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>

相关问题
最新问题