*

checkedセレクタを使用したタップしやすいチェックボックス

   

スマホサイトで見るフォームを作る際、どうやったらタップしやすいチェックボックスになるのか試してて作ってみました。

img_checkbox

スポンサードリンク

やり方としてはjqueryとか色々あるのだと思うのですが、CSSだけで実現できそうだったので、その方法を参考にしました。

参考にさせてもらったサイト↓
checkedセレクタでチェックボックスを表現

チェックボックス部分は背景画像で作っておきます。
チェックボックスのサンプル

<div id="wrapper">
	<ul>
		<li>
			<input type="checkbox" name="check_01" id="check_01">
			<label for="check_01">項目01</label>
		</li>
		<li>
			<input type="checkbox" name="check_02" id="check_02">
			<label for="check_02">項目02</label>
		</li>
		<li>
			<input type="checkbox" name="check_03" id="check_03">
			<label for="check_03">項目03</label>
		</li>
	</ul>
</div>
#wrapper{
	margin:10px 0;
	padding-top:10px;
}
ul {
	border-top:1px solid #CCC;
	overflow:hidden;
}
ul li {
	border-bottom:1px solid #CCC;
	background:#EEE;
}

ul li label {
	display:block;
	padding:20px 10px 20px 30px;
	background-image:url(img/bg_checkbox_f.png);
	-webkit-background-size: 14px 14px;
	background-size: 14px 14px;
	background-position:10px 50%;
	background-repeat:no-repeat;
	cursor:pointer;
}
ul li input[type="checkbox"] {
	position:absolute;
	width:100%;
	//display:none;ではアンドロイドで表示されてしまうそうで透明化
	opacity:0;
	//タップしたときのハイライトを非表示
	tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
//クリック後の表示
ul li input[type="checkbox"]:checked + label {
	background: #FFC;
	background-image:url(img/bg_checkbox_o.png);
	-webkit-background-size: 14px 14px;
	background-size: 14px 14px;
	background-position:10px 50%;
	background-repeat:no-repeat;
}

セレクタを使用しているので、PCサイトで利用するのはブラウザの関係上難しいかもしれませんが、スマホならこれでよいのかも。

 -iPhone, Web

Sponsored link

Sponsored link

  関連記事

Windows7とMacOSXのIPアドレスの確認の仕方

今更だけど、触らないから忘れちゃってるPCのIPアドレス確認についてです。 ますは、Windows7での確認の仕方。Ma

no image

twitterやfacebookのロゴに利用できるフォント

携わる機会がないとわからないのでメモ。 ■「twitter」のロゴ作成に利用できるフォント →  Pico-Black

土地探し目的の人でも「Bing不動産」サイトは割りと使えると思った件

はてぶで紹介記事が載ってるのを見て、「どうせまた関東だけなんでしょ」と期待せずに閲覧してみたら、意外と使えるかもねと思っ

jquery mobile デモページ

そろそろjquery mobile触っておくべき?

ふと思い立ったので、そろそろ触っておくべきか?ということでjquery mobileを触ってみました。 簡単にメモ。 デ

気軽にブログを始めるなら「Google Blogger」もありかも→配布テーマも意外とあるよ

「Google Blogger」って、一時期やたら聞いてた単語でしたが、今ってどれくらい普及してるんでしょうか? 最近ち

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

共働きの30代女性。
福岡でWebに携わってます。
主に自分用の細かいメモを書いてます。
細かい内容が多いですが、他の方にも役立つなら幸いです。

ブログの記事を紹介していただきました

このブログ更新するの、約1年ぶりか(汗) すごいお久しぶりです。 このブログを始めてもう地味に10年くらい経つのですが(

確定拠出年金、退職したときに行う手続き(継続するor掛金停止する)

私、昨年から確定拠出年金をしております。 会社には確定拠出年金の制度がなかったので、「個人型年金」の加入者として掛金の拠

実は先月で退職しました

だいぶブログさぼっておりましたが、実は先月末で会社を退職しました。 別にこの歳になって、自主退職したわけじゃないのです。

  • ブログランキング・にほんブログ村へ