*

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

  関連記事

CPIサーバー(ACE01)にWordPressをインストールする場合に確認すること

CPIサーバーにWordpressを手動インストールする場合の確認事項やhtaccessの記述についてです。 以前、「C

山口一日目・セミトラのtFont展示

山口のYCAMにて、セミトラのtFont展示とトークショーを見に行く。 展示のスタジオの壁一面にフォントが映されてて、

基本にかえってバリデートチェックをしてくれるwebサービス

とりあえず、バリデートチェックとは? バリデートチェック: HTMLやCSSが正しく書かれているかチェックする HTML

no image

大塚商会のアルファメールプラチナにwordpressをインストール

大塚商会のアルファメールに苦戦したので、今後のために残しておきます。 まず、大前提としてなのですが プラチナの場合、wo

no image

Contact Form 7の送信ボタンを画像にする

タイトルのまんまです。 送信ボタンを画像にしたかったので簡単にできそうな方法を探してみました。

コメントを残す

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


*

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

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

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

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

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

実は先月で退職しました

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

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