フォームテンプレ
上の画像のようなフォームが作れます。
HTML
<div class="form-area">
<form action="#" method="POST">
<div class="form-type">
<label class="form-label" for="type">お問い合わせ種別</label>
<select class="pull-down" id="type" name="type">
<option value="">選択してください</option>
<option value="サンプル1">サンプル1</option>
<option value="サンプル2">サンプル2</option>
<option value="サンプル3">サンプル3</option>
</select>
</div>
<div class="form-name">
<label class="form-label" for="name">氏名<span class="mandatory">必須</span></label>
<input class="text" type="text" id="name" name="name" placeholder="氏名" required>
</div>
<div class="form-furigana">
<label class="form-label" for="furigana">フリガナ<span class="mandatory">必須</span></label>
<input class="text" type="text" id="furigana" name="furigana" placeholder="フリガナ" required>
</div>
<div class="form-email">
<label class="form-label" for="email">メールアドレス</label>
<input class="text" type="email" id="email" name="email" placeholder="sumple@gmail.com">
</div>
<div class="form-sex">
<div class="form-label sex-label">性別</div>
<label for="male"><input class="radio" type="radio" id="male" name="sex"
checked><span>男性</span></label>
<label for="female"><input class="radio" type="radio" id="female"
name="sex"><span>女性</span></label>
</div>
<div class="form-message">
<label class="message-label" for="message">メッセージ</label>
<textarea class="textarea" id="message" name="message"></textarea>
</div>
<div class="form-privacy-policy">
<label><input class="privacy-policy check-box" type="checkbox" name="privacy-policy"
value="同意する" required><span>個人情報保護方針に同意する</span></label>
</div>
<input class="submit-test submit-button" type="submit" value="送信する">
</form>
</div>scss
ブラウザによって見え方が変わるので
一旦フォームのリセットCSSを入れます。
.form-area {
background-color: #fff;
padding: 62px 120px 45px;
border-radius: 0 0 12px 12px;
@include mq(xl) {
padding: 40px 60px 40px;
}
@include mq(md) {
padding: 37px 12px 40px;
}
form {
div {
width: 100%;
margin-bottom: 27px;
}
.form-sex {
margin-bottom: 20px;
}
label {
font-weight: bold;
}
.form-label {
display: inline-block;
width: 180px;
@include mq(md) {
width: 100%;
}
}
.sex-label {
font-weight: bold;
margin-bottom: 2px;
@include mq(md) {
margin-bottom: 10px;
}
}
/* formのリセットcss */
.text {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: transparent;
background-image: none;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
border-radius: 0;
color: inherit;
font-family: inherit;
font-size: 1em;
padding: 0.4em 0.8em;
width: 73.88%;
transition: 0.3s;
@include mq(xl) {
width: 100%;
padding-left: 0;
}
@include mq(md) {
padding: 4px 1px;
}
}
.text:focus,
.text:hover {
box-shadow: none;
outline: none;
border-bottom: 1px solid #4973ff80;
box-shadow: 0px 3px 1px -3px #4973ff33;
-webkit-box-shadow: 0px 9px 3px -3px #4973ff33;
-moz-box-shadow: 0px 9px 3px -3px #4973ff33;
}
.textarea {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: transparent;
background-image: none;
border: 1px solid rgba(0, 0, 0, 0.16);
border-radius: 0;
color: inherit;
font-family: inherit;
font-size: 1em;
height: 200px;
padding: 0.4em 0.8em;
width: 100%;
transition: 0.3s;
@include mq(md) {
height: 159px;
}
}
.textarea:focus,
.textarea:hover,
.pull-down:hover {
border: 1px solid #4973ff80;
box-shadow: 0px 0px 8px #4973ff80;
outline: none;
}
.message-label {
display: inline-block;
margin-bottom: 6px;
@include mq(md) {
margin-bottom: 16px;
}
}
.radio {
display: none;
}
.radio + span {
cursor: pointer;
display: inline-block;
margin: 0 35px 0 4px;
padding: 0 0 0 1.2em;
position: relative;
@include mq(md) {
margin: 0 35px 0 0;
}
}
.radio + span::before {
-webkit-transform: translateY(-50%);
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.16);
border-radius: 50%;
content: "";
display: block;
height: 12px;
left: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 13px;
transition: 0.3s;
}
.radio + span::after {
-webkit-transform: translateY(-50%);
background: #3b69ff;
border: 1px solid transparent;
border-radius: 50%;
content: "";
height: 3px;
left: 3px;
opacity: 0;
padding: 2px;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: all 0.3s ease 0s;
width: 3px;
}
.radio:checked + span::after {
opacity: 1;
}
.check-box {
display: none;
}
.check-box + span {
cursor: pointer;
display: inline-block;
margin: 0 0.2em 0;
padding: 0 0 0 38px;
position: relative;
@include mq(md) {
margin: 0;
}
}
.check-box + span::before {
-webkit-transform: translateY(-50%);
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.16);
border-radius: 2px;
content: "";
display: block;
height: 20px;
left: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 20px;
transition: 0.3s;
}
.check-box + span::after {
-webkit-transform: translateY(-50%) rotate(-45deg);
border-bottom: 2px solid #3b69ff;
border-left: 2px solid #3b69ff;
content: "";
display: block;
height: 6px;
left: 2px;
margin-top: -2px;
opacity: 0;
position: absolute;
top: 50%;
transform: translateY(-50%) rotate(-45deg);
transition: all 0.3s ease 0s;
width: 14px;
}
.check-box:checked + span::after {
opacity: 1;
}
/* ラジオボタンとチェックボックスホバー時 */
.radio + span:hover::before,
.check-box + span:hover::before {
border: 1px solid #4973ff80;
box-shadow: 0px 0px 8px #4973ff80;
}
.radio + span:checked::before,
.check-box + span:checked::before {
background: #4973ff80;
}
.radio + span:active::before,
.check-box + span:active::before {
background: #4973FF33;
}
.pull-down {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background: transparent
url(https://haniwaman.com/wp/wp-content/uploads/2018/12/form-css-arrow.png) no-repeat center
right 8px/16px 16px;
border: 1px solid rgba(0, 0, 0, 0.16);
border-radius: 0;
color: inherit;
cursor: pointer;
font-family: inherit;
font-size: 1em;
padding: 0.4em 0.8em;
width: 24.72%;
transition: 0.3s;
@include mq(xl) {
width: 100%;
margin-top: 16px;
}
}
.pull-down::-ms-expand {
display: none;
}
.pull-down:focus {
border: 1px solid rgba(0, 0, 0, 0.32);
box-shadow: none;
outline: none;
}
.submit-test {
-webkit-appearance: none;
background-color: rgba(0, 0, 0, 0.32);
background-image: none;
border: none;
border-radius: 0;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 1em;
margin: 0 0 1em;
padding: 0.6em 2em;
text-decoration: none;
}
.submit-test:hover,
.submit-test:focus {
outline: none;
}
.submit-test::-moz-foucus-inner {
border: none;
padding: 0;
}
.submit-button {
border-radius: 10px;
display: block;
background-color: #ffaa3b;
box-shadow: 0px 3px 5px #3e3e3e33;
padding: 12px 55px;
margin-top: 38px;
letter-spacing: 0.45px;
color: #fff;
transition: 0.3s;
font-weight: bold;
@include mq(md) {
margin: 0 auto;
padding: 12px 49px;
}
}
.submit-button:hover {
background-color: #f18900;
}
.mandatory {
background-color: #ff4646;
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 2px 8px;
margin-left: 13px;
border-radius: 2px;
@include mq(xs) {
margin-left: 18px;
padding: 2px 8px;
}
}
.form-privacy-policy {
span {
font-size: 18px;
font-weight: bold;
}
}
@include mq(xs) {
input {
font-size: 16px !important;
}
}
}
}
}この記事をシェアする
