<input>タグの"submit"属性の見た目を、CSSで変更しようとしてハマる

CSSフォーム

目次一覧

 状態:試行錯誤履歴  閲覧数:888  投稿日:2019-08-31  更新日:2019-10-03
submitボタン実装方法は2種類ある / 気が付いたこと / <input type="submit">は、デフォルトCSSに癖がある

<input type="submit">のデザイン案


submitボタン実装方法は2種類ある / 気が付いたこと / <input type="submit">は、デフォルトCSSに癖がある

 閲覧数:294 投稿日:2019-08-31 更新日:2019-10-03 

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">のデザイン案

 閲覧数:245 投稿日:2019-10-03 更新日:2019-10-03 

<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 フォームへのスタイル設定


IE8で、フォームの縦位置がどうしても真ん中にこない場合の、最後の手段(案)

フォーム要素に対する(私の)CSS適用ルール



類似度ページランキング
順位 ページタイトル抜粋
1 inputタグのsize属性 40
2 HTML5では、inputタグの閉じタグを付与しない 36
3 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い 31
4 navタグで定義している部分だけCSSが効かない【html5】 31
5 要素の alt 属性 と、
要素の違い
30
6 CSS の class名 と id名 を、全プロジェクトで意識的に統一しようかと 30
7 HTML5で、set_include_pathを用いると、先頭に謎の空白行ができる 29
8 作成した素材がどうしても見つからないときは、「png形式」を疑ってみる 29
9 Chromeで閲覧している任意URLのhtmlタグに対して、なるべく簡単に「html{font-size:0.1em!important;}」を追加したい 29
10 画像を小さくトリミングして綺麗にみせるため、PhotoShop CS3 で色調補正する 29
11 CSS3-mediaqueries.jsは、@ importスタイルシートに記述した内容を反映しない 29
12 Photoshop CS3 「全てのメニュー項目を表示する」 28
13 「position:absolute;」が分からなくなったときに見るエントリー 28
14 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない 27
15 resizeが効かない場合は、min-heightを設定してみる 27
16 img srcタグで、画像の上に文字 27
17 親要素の背景色を、CSSで打ち消したい 27
18 HTML5では、action属性を省略すると、送信先はそのHTMLファイル自身になる 27
19 指定兄弟要素(h1~h5タグ何れか)のmarginを取得して、指定要素に適用させたい 27
20 StableDiffusionのweb版「DreamStudio」を使用してみた感想。それなりに楽しめましたが、課金してまで使用してみたいとは思いませんでした。 26
2023/2/05 7:59 更新
週間人気ページランキング / 1-29 → 2-4
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 49
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 38
3 「bgcolor」「background-color」「background」の違い | CSS 34
4 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 25
5 RGBの種類 / ビットカラー | RGB(色) 20
6 「属性」「プロパティ」「アトリビュート」の違い | CSS 18
6 Design 0 18
7 「東京都」のカラーコード取得は難しい | カラーコード(色) 17
8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 16
9 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 15
9 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 15
10 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 14
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 13
11 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 13
11 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 13
11 ICCプロファイル | カラーマネージメント(色) 13
11 HSLとHSVの違い | 色変換(色) 13
11 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 13
12 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 12
13 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 11
2023/2/5 1:01 更新