勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

formのsubmitをボタンを無くしたり画像をつけたりCSSで装飾

  CSS

aタグになっていたところをsubmitボタンに変えてほしいという修正依頼があった。ページ遷移とか機能的な部分は大丈夫なんだけど、デザイン部分が分からなかったのでメモ。

 

■ソース

<style>
.test{
	border: medium none;
	cursor: pointer;
	background: #fff;
}
.test2{
	border: 2px solid #999;
	cursor: pointer;
	background: #fff;
}
.test3{
	background:url('./submitBtn.png');
	border: medium none;
	cursor: pointer;
	width: 180px;
	height: 36px;
}
</style>

<input type="submit" value="送信"><br /><br />
<input type="submit" value="送信" class="test"><br /><br />
<input type="submit" value="送信" class="test2"><br /><br />
<input type="submit" value="送信" class="test3"><br /><br />

 

■サンプル

http://sample.taitan916.info/submitCss/

 

■その他

ボタンの枠みたいな部分はborderで、背景はbackgroudで変更できるらしい。あと画像をつける場合は縦横を指定しとかないと文字数の関係で途切れちゃったりするので注意する。

 - CSS

  関連記事

CodeIgniter4&Bootstrap&jQueryで簡易版お問い合わせページの作成

CodeIgniter4.4.4&Bootstrap&jQuer ...

videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法

Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...

jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクトメ ...

レスポンシブ対応で右カラムのコンテンツを上に表示させる方法

レスポンシブ対応サイトの簡易なコーディングをする経験があった。何も考えずにHTM ...

上部に固定されたヘッダーメニューの作成

■やりたい事 ページスクロールしても上部に固定されたヘッダメニューの作る &nb ...