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

CSSフォーム

目次一覧

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

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


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

 閲覧数:125 投稿日: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">のデザイン案

 閲覧数:90 投稿日: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 画像を小さくトリミングして綺麗にみせるため、PhotoShop CS3 で色調補正する 29
10 CSS3-mediaqueries.jsは、@ importスタイルシートに記述した内容を反映しない 29
11 Photoshop CS3 「全てのメニュー項目を表示する」 28
12 「position:absolute;」が分からなくなったときに見るエントリー 28
13 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない 27
14 resizeが効かない場合は、min-heightを設定してみる 27
15 img srcタグで、画像の上に文字 27
16 親要素の背景色を、CSSで打ち消したい 27
17 HTML5では、action属性を省略すると、送信先はそのHTMLファイル自身になる 27
18 指定兄弟要素(h1~h5タグ何れか)のmarginを取得して、指定要素に適用させたい 27
19 「display:flex;」を設定している「
  • タグ」内の「タグ」クリック範囲を拡大する
  • 26
    20 「Photoshop CS3」で、レイヤーを他のPSDへコピーする方法 26
    2021/7/28 10:59 更新
    週間人気ページランキング / 7-21 → 7-27
    順位 ページタイトル抜粋 アクセス数
    1 RGB ⇔ Lab | 色変換(色) 47
    2 画面キャプチャ | Chrome 拡張機能(ブラウザ) 32
    3 血の色 / #b30000 / #360800 / #ff0000 | 色 30
    4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 26
    5 RGBの種類 / ビットカラー | RGB(色) 17
    6 「属性」「プロパティ」「アトリビュート」の違い | CSS 16
    7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 15
    7 HSLとHSVの違い | 色変換(色) 15
    8 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 14
    9 Design 0 12
    9 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 12
    10 「bgcolor」「background-color」「background」の違い | CSS 10
    11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 9
    12 親要素の背景色を、CSSで打ち消したい | CSS 7
    12 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 7
    12 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 7
    13 Chromeブックマークの不満な点 | Chromeブックマーク(ブラウザ) 6
    13 100/7%ではなく100%/7。(100/7)%ではなく(100%/7) | CSS 6
    13 ログイン 6
    13 グラデーション練習 | Fireworks 8(Fireworks) 6
    2021/7/28 1:01 更新