一个简单的原生表单布局

效果

HTML

  <div class="form-container is-filings-show">
        <div style="font-size: 20px;color: #fff;">想咨询购买产品，请留下您的联系方式</div>

        <div class="form">

          <div class="form-item">
            <div>姓名</div>
            <div>
              <input type="text" placeholder="请输入您的姓名" name="name">
            </div>
          </div>

          <div class="form-item">
            <div>联系方式</div>
            <div>
              <input type="text" placeholder="请输入您的电子邮箱/联系电话" name="contactWay">
            </div>
          </div>

          <div class="form-item">
            <div>留言</div>
            <div>
              <textarea rows="5" cols="45" placeholder="请输入您的留言" class="message"></textarea>
            </div>
          </div>

          <div class="send">
            <button id="submit">发送</button>
          </div>

        </div>

      </div>
    </div>

CSS

.form {
  width: 345px;
  background-color: #18408B;
}

.form .form-item {
  margin-bottom: 30px;
}

.form .form-item:nth-child(3) {
  margin-bottom: 15px;
}

.form .form-item div:nth-child(1) {
  color: #fff;
  margin-bottom: 5px;
}

.form .form-item input {
  padding-left: 15px;
  box-sizing: border-box;
  color:#fff;
  border: none;
  background-color: #2E57A4;
  border-radius: 2px;
  height: 30px;
  width: 100%;
  outline: none;
}


input::input-placeholder {
  color: #8DA8C8;
}

/* 有些资料显示需要写，有些显示不需要，但是在编辑器webstorm中该属性不被识别 */
::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #8DA8C8;
}

:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #8DA8C8;
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #8DA8C8;
}

:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #8DA8C8;
}

textarea {
  color:#8DA8C8;
  border: none;
 background-color: #2E57A4;
  box-sizing: border-box;
  padding-left: 15px;
}

.send button {
  cursor: pointer;
  height: 32px;
  line-height: 32px;
  border-radius: 15px;
  border: 1px solid #fff;
  width: 100%;
  background-color: transparent;
  color: #fff;
}