
スマホで使いやすい申し込みフォーム②
次にCSSはこちら。
@charset "utf-8"; *{ box-sizing: border-box; } html{ font-size: 1em; } body{ margin: 0; padding: 1.2em; font-family: Helvetica, Arial, sans-serif; color: #212121; } h1{ margin: 0; } p{ margin-bottom: 0; } h2{ margin-top: 0; } form{ width: 100%; } input{ border: 0; font-size: 1.5rem; padding: .8rem; } input[type="text"]{ width: 100%; height: 3rem; } input[type="number"]{ width: 100%; height: 3rem; } input[type="email"]{ width: 100%; height: 3rem; } input[type="submit"]{ border: 0; background-color: #8BC34A; } textarea{ width: 100%; } .gender{ display: block; padding: .5em 0 0; } .grade{ display: block; padding-top: .5em; } .family{ display: block; padding-top: .5em; } .label{ display: block; transform: translateY(35px); } .label2{ display: block; transform: translateY(35px); } .label3{ display: block; transform: translateY(35px); } .label4{ display: block; transform: translateY(35px); } .label5{ display: block; transform: translateY(35px); } .label6{ display: block; transform: translateY(35px); } .label7{ display: block; transform: translateY(35px); } .label8{ display: block; transform: translateY(35px); } .label9{ display: block; transform: translateY(35px); } .label10{ display: block; transform: translateY(35px); } .slide{ transform: translateY(0); animation: slide; transition: all 1s; } .genderForm{ padding: 1em 0 0; } #man{ width: .8em; height: .8em; } #woman{ width: .8em; height: .8em; } #grade1{ width: .8em; height: .8em; } #grade2{ width: .8em; height: .8em; } #grade3{ width: .8em; height: .8em; } #attendant{ width: .8em; height: .8em; } #family1{ width: .8em; height: .8em; } #family2{ width: .8em; height: .8em; } #family3{ width: .8em; height: .8em; } #info{ width: .8em; height: .8em; } .gradeFrom{ padding: 1em 0 .5em; } .adrForm{ padding: .5em 0 0; } .adr{ display: block; } .adr-txt{ font-size: 0.7rem; } .adr-num{ padding-top: 1em; } .adr-other{ padding-top: 1em; } #adr-other{ border-bottom: 2px solid #8BC34A; } .adr-reg{ padding-top: 1em; } .adr-loc{ padding-top: 1em; } .adr-str{ padding-top: 1em; } .adr-reg{ padding-top: 1em; } .telForm{ display: block; padding-top: 1em; } .mailForm{ display: block; padding-top: 1em; } .family{ display: block; padding-top: 1em; } .contact{ display: block; padding-top: 1em; } .info{ display: block; padding: 1em; text-align: center; } @keyframes slide{ 0%{ position: absolute; } 100%{ position: static; } } input[type="submit"] { display: block; margin: 0 auto; } input[required]{ background-color: rgb(254, 232, 232); border-bottom: 1px solid #D32F2F; } .required{ color: #D32F2F; font-size: 0.7rem; margin-left: 0.5em; } .nameForm{ position: relative; } .furiNameForm{ position: relative; } .alert{ margin: 0 0 0 .5em; padding: .5em 0; color: #fff; background-color: #D32F2F; border-radius: 5px; width: 70%; transform: translateY(-20px); /*上に少しずらす*/ font-size: 0.785rem; } .alert::before{ content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 0 14px 24.2px 14px; border-color: transparent transparent #D32F2F transparent; transform: translateY(-20px); } .attendant{ display: block; margin-top: 1em; } .family-wrap{ display: none; } textarea{ border: 1px solid #ccc; } input[type="submit"][disabled] { background-color: #ccc; cursor: default; } .telephone{ text-align: center; }
*(アスタリスク)などはあまり推奨されない使い方なので改造して使っていただけたら嬉しいです。
入力済みのもの用にクラス名を作って次に紹介するjQueryでそのクラス名を与えてアニメーションさせています。