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

CSSフォーム

目次一覧

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

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


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

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

 閲覧数:345 投稿日: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 タグの"submit"属性の見た目を、CSSで変更しようとしてハマる 83
2 inputタグのsize属性 40
3 HTML5では、inputタグの閉じタグを付与しない 36
4 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い 31
5 navタグで定義している部分だけCSSが効かない【html5】 31
6 要素の alt 属性 と、
要素の違い
30
7 CSS の class名 と id名 を、全プロジェクトで意識的に統一しようかと 30
8 HTML5で、set_include_pathを用いると、先頭に謎の空白行ができる 29
9 作成した素材がどうしても見つからないときは、「png形式」を疑ってみる 29
10 Chromeで閲覧している任意URLのhtmlタグに対して、なるべく簡単に「html{font-size:0.1em!important;}」を追加したい 29
11 画像を小さくトリミングして綺麗にみせるため、PhotoShop CS3 で色調補正する 29
12 CSS3-mediaqueries.jsは、@ importスタイルシートに記述した内容を反映しない 29
13 Photoshop CS3 「全てのメニュー項目を表示する」 28
14 「position:absolute;」が分からなくなったときに見るエントリー 28
15 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない 27
16 resizeが効かない場合は、min-heightを設定してみる 27
17 img srcタグで、画像の上に文字 27
18 親要素の背景色を、CSSで打ち消したい 27
19 HTML5では、action属性を省略すると、送信先はそのHTMLファイル自身になる 27
20 指定兄弟要素(h1~h5タグ何れか)のmarginを取得して、指定要素に適用させたい 27
2024/10/05 10:12 更新
週間人気ページランキング / 9-28 → 10-4
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 19
2 鉄道会社毎のカラーコード | カラーコード(色) 18
3 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 13
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 9
5 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 7
6 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 6
6 RGBの種類 / ビットカラー | RGB(色) 6
6 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 6
7 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 5
7 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 5
7 「bgcolor」「background-color」「background」の違い | CSS 5
8 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 4
8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 4
9 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
9 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 3
9 aタグで複数のブロック要素を囲むやり方 | CSS 3
9 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 3
10 HTML5では「ブロックレベル要素」「インライン要素」で分類しない | HTML5(HTML) 2
10 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 2
10 Design 0 2
2024/10/5 1:01 更新