DAY39.デザインカンプからコーディング編 お問い合わせフォーム

01.ブラウザ間の差異を極力なくす

全てのフォーム要素のデザインをフラットな状態にする

・フォームの各要素はブラウザによって基本となるデザインが異なる
・文言や大きさや色、アイコンなど

1.テキスト　

<input class="text-test" type="text">

.text-test {
　-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;
　padding: 0.4em 0.8em;
　width: 100%;
}
.text-test:focus {
　border: 1px solid rgba(0, 0, 0, 0.32);
　box-shadow: none;
　outline: none;
}

2.テキストエリア　

<textarea class="textarea-text"></textarea>

・テキストエリアも先ほど紹介したテキストとほぼ同じ
・高さを指定する点だけが異なる
・デザインに応じて高さだけ指定

3.ラジオボタン

<label>
　<input class="radio-test" type="radio" name="radio-name">
　<span>ラジオ１</span>
</label>
・ラジオボタンとチェックボックスはちょっと無理やり
・標準で出力されるラジオボタンは消し独自のボタンを擬似要素で作る
.radio-test {
　display: none;
}
.radio-test + span {
　cursor: pointer;
　display: inline-block;
　margin: 0 0.2em 0;
　padding: 0 0 0 1.2em;
　position: relative;
}
.radio-test + span::before {
　-webkit-transform: translateY(-50%);
　background: #fff ;
　border: 1px solid rgba(0, 0, 0, 0.16);
　border-radius: 50%;
　content: ""; display: block;
　height: 16px;
　left: 0; position: absolute;
　top: 50%;
　transform: translateY(-50%);
　width: 16px;
}
.radio-test + span::after {
　-webkit-transform: translateY(-50%);
　background: rgba(0, 0, 0, 0.32);
　border: 1px solid transparent;
　border-radius: 50%;
　content: "";
　height: 8px;
　left: 4px;
　opacity: 0;
　padding: 2px;
　position: absolute;
　top: 50%;
　transform: translateY(-50%);
　transition: all 0.3s ease 0s;
　width: 8px;
}
.radio-test:checked + span::after {
　opacity: 1;
}

4.チェックボックス

<label>
　<input class="check-test" type="checkbox" name="check-name">
　<span>チェック１</span>
</label>
・:checkedでオン・オフを切り替えられるCSSの書き方
・labelで囲うと遠くからラジオボタンを操作できる
という点を知っておくと柔軟に操作できるようになる

5.セレクトボックス（ドロップダウンメニュー）

<select class="select-test">
　<option>セレクトA</option>
　<option>セレクトB</option>
　<option>セレクトC</option>
</select>
・セレクトボックスが最もブラウザ間で異なる
・色んな形のアローアイコンが登場する
・アローアイコンを上書きして自分が用意した画像を背景として適応させる
.select-test {
　-moz-appearance: none;
　-webkit-appearance: none;
　appearance: none;
　background: transparent url(https://haniwaman.com/cms/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: 100%;
}
  .select-test::-ms-expand {
　display: none;
}
.select-test:focus {
　border: 1px solid rgba(0, 0, 0, 0.32);
　box-shadow: none;
　outline: none;
}

6.ボタン

<input class="submit-test" type="submit" value="送信">
・ボタンも各ブラウザによって癖がある
・ボタンはフォーム作ったら必ず出てくる要素
・初期化して → 自分のオリジナルなデザインを当てていく
.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;
}

⑦ファイル選択

<label id="file-test-label" for="file-test">
　ファイルを選択
</label>
<input type="file" id="file-test"> <input type="text" id="file-test-name" disabled>
・JavaScript（jQuery）の力を利用して無理やりデザインを作る
・標準の要素は表示させない
・labelを消した要素の代わりとして、こちらに任意のデザインを当てていく
・ファイルを選択するとファイル名が表示される
・表示させる用のinput type="text"を用意
・jQueryの処理によって表示させるという流れイベントとしてchangeで拾う
#file -test {
　display: none;
}
#file -test-label {
　background: #fff ;
　border: 1px solid rgba(0, 0, 0, 0.16);
　cursor: pointer;
　padding: 0.4em 0.8em;
}
#file -test-name {
　-moz-appearance: none;
　-webkit-appearance: none;
　appearance: none;
　background-color: transparent;
　background-image: none;
　border: none;
　border-radius: 0;
　color: inherit;
　display: none;
　font-family: inherit;
　font-size: 1em;
　padding: 0.4em 0;
　width: 100%;
}

jQuery( '#file-test' ).change( function() {
　jQuery( '#file-test-name' ).show();
　jQuery( '#file-test-name' ).val( jQuery( this ).val() );
　jQuery( this ).val( '' );
});