想定外の新機能！ HTMLの<input type="checkbox" switch>だけで、スイッチUIが実装できるようになるぞ

2024/02/01 28 users CSS スイッチ ボリューム アプリ Switch

WebサイトやアプリのUIで、スイッチを実装するのはなかなか面倒です。CSSで書くと、なかなかのボリュームになってしまいます。 そんなスイッチがHTMLだけで実装できるようになります。 Release Notes for Safari TP 185によると、HTMLの新機能としてswitch属性がサポートされました。これにより、スイッチUIがHTMLで簡単... 続きを読む

input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案

2023/12/23 26 users input Switch type 属性 HTML

input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案 2023.12.23 スイッチは多くのウェブサイトで使われているものの、HTML の標準要素としては存在していませんでした。そのため多くの開発者は、スイッチを実装するために独自の実装を行っていましたが、このような独自の実装... 続きを読む

checkboxやradioをアイコン付きでよりオシャレにできるjQueryプラグイン「Labelauty」:phpspot開発日誌

2014/12/18 20 users rAdio phpspot開発日誌 jQueryプラグイン

checkboxやradioをアイコン付きでよりオシャレにできるjQueryプラグイン「Labelauty」 2014年12月18日- Labelauty jQuery Plugin checkboxやradioをアイコン付きでよりオシャレにできるjQueryプラグイン「Labelauty」。 ボタンの横にアイコンを表示させてON/OFFでアイコンを変えたりすることが可能。 通常のデザインが分かり... 続きを読む

【スマートフォン制作向け】checkboxをCSSのみでカスタマイズ | バシャログ。

2013/07/01 33 users ishida バシャログ CSS 続編 スタジアム観戦

こんにちは、ishida です。 先週金曜日、横浜スタジアムでノーヒットノーランをこの目で見ました。 やっぱり野球はスタジアム観戦がいいですな。 さてさて、以前こちらのブログで 【スマートフォン制作向け】radioボタンをCSSのみでカスタマイズ という記事を書きましたが、今回はこちらの続編でcheckboxカスタマイズをご紹介します。 ソースコード コードはこちらです。 あっ、それと バシャログ... 続きを読む

[CSS]にょいーんとアニメーションでパネルを表示するスタイルシート | コリス

2011/09/02 65 users コリス None display CSS class

JavaScriptやFlashを使用せず、パネルをにょいーんとアニメーションで表示・非表示するスタイルシートを紹介します。 デモページ 実装 デモページを例に実装方法を紹介します。 HTML 最初のチェックボックスはdisplay:none;で非表示で、その後にlabel要素を実装します。 <input type="checkbox" id="doggiezzz" class="popUpCon... 続きを読む

ホーム | freenote

2011/07/31 183 users freenote remember value Name 次回

freenote<input type="checkbox" name="remember" value="1" id='remember' /> 次回から自動的にログイン ※パスワードを忘れた方はこちら 続きを読む

３つの状態を保持できるフォームエレメント実装jQueryプラグイン「jQuery 3 State Switch」:phpspot開発日誌

2011/07/05 31 users phpspot開発日誌 状態 rAdio checked 3つ

３つの状態を保持できるフォームエレメント実装jQueryプラグイン「jQuery 3 State Switch」 2011年07月05日- jQuery 3 State Switch Plugin ３つの状態を保持できるフォームエレメント実装jQueryプラグイン「jQuery 3 State Switch」。 フォーム要素といえばcheckboxやradio等がありますが、どちらもchecked... 続きを読む

フォームをデザインしよう | DesignWalker

2009/03/25 910 users DesignWalker ウェブデザイン rAdio CSS

お問い合わせやログイン、アンケートなどなど、ウェブデザインには欠かせないフォーム。 今回は、そんなフォームをデザインする方法をいくつかまとめてご紹介します。 JavaScriptやCSSを使えば結構いろいろなことができそうです。 FancyForm mootoolを使ってチェックボックスとラジオボタンををクールなデザインに変えてしまうことができます。 CRIR: Checkbox & Radio ... 続きを読む

クールなUIを実現可能なAjaxフレームワーク「vegUI」:phpspot開発日誌

2007/05/07 106 users Button Ajaxフレームワーク MENU ライブラリ

vegUI Demonstration クールなUIを実現可能なAjaxフレームワーク「vegUI」 このライブラリを使うことで次のようなクールなブラウザ内ウィンドウＵＩを実現できるようです。 ライブラリには、Button, ContentBox, CheckBox, Menu, ScrollBarのようなUIに関わるようなクラスから、Ajax BridgeのようなAjax用クラスなどが提供される... 続きを読む

君の発売日 - ドラッグで複数のチェックボックスをチェックする

2006/06/22 89 users ドラッグ チェックボックス 複数 prefs 発売日

■[javascript]ドラッグで複数のチェックボックスをチェックする 23:39 http://skit.dip.jp/lab/js/draggable_checks つくった。table,ol,ulに対応。 <h2>旅行したいところは？</h2> <ul id="prefs"> <li><label><input type="checkbox" name="prefs[]" value="1... 続きを読む