css お问い合わせフォーム（チェックボックス）

Posted 2021-05-13

<div class="border">
    <h3>お問い合わせフォーム</h3>
    <p>下記のお問い合わせフォームに必要事項を記載し、「確認画面へ進む」ボタンを押してください。</p>
    <table class="base-table contact-table">
      <tr>
        <th>お名前<span class="must">必須</span></th>
        <td class="name"><input name="name" type="text"></td>
      </tr>
      <tr>
        <th>電話番号<span class="must">必須</span></th>
        <td class="tel"><input name="tel" type="text"></td>
      </tr>
      <tr>
        <th>メールアドレス<span class="must">必須</span></th>
        <td><input name="maild" type="text"></td>
      </tr>
      <tr>
        <th>住所</th>
        <td><input name="address" type="text"></td>
      </tr>
      <tr>
        <th>種別<span class="must">必須</span></th>
        <td class="checkbox checkbox01"><label><input type="checkbox" name="type" value="入居相談について" class="checkbox01-input">
          <span class="checkbox01-parts">入居相談について</span></label>
          <label><input type="checkbox" name="type" value="施設見学について" class="checkbox01-input">
          <span class="checkbox01-parts">施設見学について</span></label><br>
          <label><input type="checkbox" name="type" value="求人について" class="checkbox01-input">
          <span class="checkbox01-parts">求人について</span></label>
          <label><input type="checkbox" name="type" value="その他お問い合わせ" class="checkbox01-input">
          <span class="checkbox01-parts">その他お問い合わせ</span></label></td>
      </tr>
      <tr>
        <th class="contact_text">お問い合わせ内容<span class="must">必須</span></th>
        <td><textarea name="mess" cols="" rows=""></textarea></td>
      </tr>
    </table>
    <p class="btn">
      <input type="submit" value="確認画面へ進む">
    </p>
  </div>

#contact .border {
	box-shadow:  0 0 15px rgba(0,0,0,.1);
  	-webkit-box-shadow: 0 0 15px rgba(0,0,0,.1);
  	-moz-box-shadow: 0 0 15px rgba(0,0,0,.1);
	border-radius: 10px;
	background: #fff;
	margin: 0 0 50px 0;
	padding: 50px;
}

#contact .border h3,
#contact .border p {
	text-align: center;
}

#contact .border h3 {
	color: #3db680;
	font-size: 3rem;
	font-weight: bold;
	margin: 0 0 15px 0;
}

.base-table {
    width: 100%;
	margin: 25px 0 0 0;
}

.base-table th {
    padding: 25px 30px;
    text-align: left;
	font-weight: bold;
	letter-spacing: 0.06em;
    width: 200px;
}

.base-table td {
    padding: 20px 30px;
}

.contact-table td {
    padding: 25px 20px;
}

.contact-table .checkbox {
	padding: 30px 20px 10px 20px;
}

.contact-table .must {
    color: #fff;
	font-size: 1.4rem;
    background-color: #fa6226;
    padding: 0 6px;
    float: right;
}

.contact-table td input[type="text"] {
	font-size: 2rem;
    height: 50px;
    width: 100%;
	box-sizing: border-box;
	background: #fffef4;
	border: 3px solid #e9e9e9;
	padding: 5px;
}

.name input[type="text"],
.tel input[type="text"] {
	width: 60% !important;
}

/*---------- チェックボックスを装飾 ----------*/
.checkbox01-input{
  display: none;
}
.checkbox01-parts{
  padding-left: 20px;
  position:relative;
  margin-right: 20px;
}
.checkbox01-parts::before{
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #c9c9c9;
  border-radius: 50%;
}

.checkbox01-input:checked + .checkbox01-parts::after{
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 3px;
  width: 11px;
  height: 11px;
  background: #c9c9c9;
  border-radius: 50%;
}

.contact-table td textarea {
	font-size: 2rem;
    height: 230px;
    width: 100%;
	background: #fffef4;
	border: 3px solid #e9e9e9;
	box-sizing: border-box;
	padding: 5px;
}

.contact_text {
	vertical-align: top;
}

.btn {
    text-align: center;
    margin-top: 20px;
}

input[type="submit"] {
	font-size: 1.6rem;
	font-weight: bold;
    background: -moz-linear-gradient(#f7fbfc, #cbcbcb);
    background: -webkit-linear-gradient(#f7fbfc, #cbcbcb);
    background: linear-gradient(#f7fbfc, #cbcbcb);
    background-color: transparent;
    cursor: pointer;
    padding: 7px 27px 6px 27px;
    border: 1px solid #c3c3c3;
	border-radius: 5px;
}