勉強したことのメモ

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

  関連記事

Flash上にHTMLの文字やリンクを重ねる方法

FlashにHTMLで文字を書きたかった。そのまま書くのは無理だろうけどCSSか ...

CSSフレームワークであるTailwind CSSの特徴とBootstrapとの違いについて

あるサイトをWappalyzerで調査していた際にUIフレームワークがTailw ...

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

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

ガラケー(特にdocomo)でのCSS

PCサイトだとIEでつまずくことが多いけど、 ガラケーはdocomoが難儀やよ、 ...

要素の表示or非表示

今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...