*

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

  関連記事

no image

ただいま読書中→読みました

この前のお部屋整理で下の本を見つけました。 以前旦那さんが買ってきた本です。 600万人の女性に支持されるクックパッドと

no image

チキンラーメン

キッズ向けゲームと食育の「チキラー島」 よくありそうなんだけど、こんなサイト好きです〜。 作るのめんどくさいだろうなぁ〜

no image

MacでPDFを結合する方法

地味なことにいたく感動してしまったので書いちゃいます。 【MacでPDFを結合する方法】 1)結合するそれぞれのPDFを

NIKE TRAINING CLUB

部屋を整理してたら、以前NIKEでシューズを買ったときにもらったNIKE TRAINING CLUBのチラシが出てきたの

no image

福岡の写真素材サイト

福岡に住んでて、こんな仕事をしている以上は 使いたいけどなかなか無い福岡の写真素材。 これまた会社の方に良い素材サイト教

コメントを残す

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


*

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

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

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

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

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

実は先月で退職しました

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

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