目次一覧
状態:試行錯誤履歴
閲覧数:1,334
投稿日:2019-08-31
更新日:2019-10-03
submitボタン実装方法は2種類ある / 気が付いたこと / <input type="submit">は、デフォルトCSSに癖がある
<input type="submit">のデザイン案
<input type="submit">のデザイン案
submitボタン実装方法は2種類ある / 気が付いたこと / <input type="submit">は、デフォルトCSSに癖がある
submitボタン実装方法は2種類ある
<input type="submit">
・CSS適用が難しい
・デフォルトCSSの影響を受ける(が強い)
<input type="submit" value="送信する">
<button type="submit" >
・CSS適用が簡単
・通常通り(他要素と同様の取り扱い)
<button type="submit" >送信する</button>
気が付いたこと
「<input type="submit">のCSS変更は、予想していた以上にやりづらかった
他で動作しているCSSをコピペしてみても意図した通り動作しない、など
<input type="submit" name="xxxx" value="xxxx" class="xxxx">
<button type="submit">を使用した方が良いかも
<input type="submit">と<button type="submit">の違いを知りたい
<input type="submit">は、デフォルトCSSに癖がある
<input type="submit">のデフォルトCSSを一部変更しようとしてハマる
デフォルトのグラデーション
「:hover」時にborderを設定すると、消える
デフォルトのborder
「:hover」時にborder:2pxを設定しないと、位置がズレる
・2px固定とか環境依存が怖くて指定したくない
その他解決できなかったトラブル
・文字後に三角形矢印を、コピペCSSで表示しようとするもうまくいかず
<input type="submit">のデザイン案
<input type="submit">のデザイン案
時代に逆行しているが、グラデーションは制限を受けなかった
・Ultimate CSS Gradient Generator
一旦は採用した案
HTML
<input type="submit" name="send" value="ダウンロード" class="btn-download">
CSS
<style>
.btn-download{
margin: 1rem;
padding: 0.5rem 1rem;
font-size: 1rem;
background: linear-gradient(to bottom, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
color:white;
border: solid 2px #6db3f2;
}
.btn-download:hover {
/* background: linear-gradient(to bottom, #009af9 8%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); */
background: linear-gradient(to bottom, #009af9 15%,#009af9 18%,#009af9 18%,#a9d2f3 21%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);
}
.btn-download:active {
background-color: #4163A7;
box-shadow: 0 0 #3F51B5;
top: 1rem;
}
</style>
最終的に<button type="submit">へ変更
上記グラデーション案は不採用
・HTML フォームへのスタイル設定