*

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

  関連記事

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

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

WordPressでプラグインなしでURLを指定してスクリーンショットを表示する方法

WordPressでスクリーンショットを表示させることって、ちょいちょいあります。 てっきりプラグインなのかと思ってまし

no image

モバイル用

wordpressのモバイル用。便利。でもdocomoとかで見れないので、そっちのプラグインはようわからん。 WPtou

2段階認証を設定したらiPhoneのメールアプリで「メールが取得できません」

タイトルのまんまなんですが、Googleの2段階認証を設定した後、iPhoneでGmailを確認しようとすると「メールを

no image

昔の記事もインポート

とっくの昔にお亡くなりになってると思ってた昔のblogが、支払いしたら生き返りましたw が、もう古い方は解約の手続きしち

コメントを残す

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


*

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

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

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

実は先月で退職しました

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

Thunderbirdのアドオン「QuickText」のテンプレが消えた?時の対処法

後で調べたら、QuickTextで割とよく見られる問題?のようですが、私は今回初めての体験だったので焦りました。 私の場

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