css+jQueryでチェックボックス&ラジオボックスをオリジナルデザインのボタンにする
Posted: 2012.04.10 / Category: javascript / Tag: jQuery ブラウザ標準のチェックボックス&ラジオボタンのデザインだと俺のクールなサイトには合わん。 といったときの為にボタン風なオリジナルデザインにする方法をご紹介します。 cssオンリーの場合 まずはcssのみでやってみます。 隣接セレクターやcheckedセレクターを使用している関係でieでは動きません。 <div class="check-group clearfix"> <div> <input id="checkbox1" type="checkbox" name="check[]" value="c1" /> <label for="checkbox1">Checkbox 1</label> </div> <div> <input id="checkbox2" type="ch
CSSだけでボタン風のラジオボタン : mwSoft blog
どうすればいいのか調べたら、radioのdisplayをnoneにして、checkedの時にスタイル変えればCSSのみでいけるらしい。 .button-radio input[type="radio"] { display:none; } .button-radio label { display:inline-block; color:#fff; background-color:#2780e3; padding:5px 10px; } .button-radio input[type="radio"]:checked + label { background-color:#000; } <div class="button-radio"> <input id="bar1" type="radio" name="foo" value="bar1" checked> <label for=
jQuery Mobileのラジオボタンを選択解除できるようにしたいんです - なんでや。。
やり方によるが、「二度押し」で解除させることができなくてハマった。 「もうお馴染みのラジオボタン」は1度選択したら最後解除できない、というのは利用者としてもおおむね常識だと思う。むしろ選択解除できるようにしたいものはプルダウンリストを使う。 スマートフォンだと、プルダウンで表現するとせっかくのタッチデバイスなのにいちいちツータッチ必要で面倒臭い、ラジオボタンにしてワンタッチにしたいという欲求が……ないですかね。 ところがラジオボタンだと選択解除ができないという。 jQuery Mobileでラジオボタンを利用すると、こうラジオボタンというより押しボタン式選択装置のような見た目になりますよね。で利用者としては「これ二度押ししたら選択解除できるんじゃね」と思いそう……ではないですかね。いやそうしてあげたい。 取り得る道として 上述通り二度押しで選択解除 クリアボタン ラジオボタンやめて排他選択
二度押しで選択解除できるラジオボタン
解除できるラジオボタンを設置したいときもあります。 解除ボタンを追加して押させるのもスマートじゃないので、チェック済のラジオボタンを押したら選択解除できるようにしてみます。 ネットで情報を探すと苦戦している人も多いけど、チェックされてる値を記憶しておいて、同じラジオボタンが押されたら解除するだけ、意外と簡単です。 JQueryで書いてみましたが、別に素のJavaScriptでも簡単だと思います。 選択肢１ 選択肢２ 選択肢３ <script> $(function(){ var nowchecked = $('input[name=xxxx]:checked').val(); $('input[name=xxxx]').click(function(){ if($(this).val() == nowchecked) { $(this).prop('checked', false); no
labelタグに関する動作の統一【HTML, JavaScript】 - Programming Magic
labelタグは、inputタグと文字や画像の関連付けをして、その文字や画像をクリックしてもinputタグをクリックしたのと同じように動作させるものだが、この動作はブラウザによって違いが出ることがある。 そこでlabelタグの動作を統一する方法を考えてみる。 以下のように、inputタグをlabelタグの子要素とするとid属性、for属性を省略することができるが、IE6はこれに対応してない。 （※IE7では対応している。） <input type = "checkbox" id = "checkbox1"> <label for = "checkbox1"> ここをクリックするとチェックが付く。 </label>
CSS Toggle Switch Examples - Call Me Nick
In this tutorial, we look at some CSS toggle switch examples. We’ll be using pure CSS to create some toggle switches, adding a neat user experience to checkbox functionality. Get Source View Demo The Reasoning Often times, we find ourselves needing users to check/uncheck a checkbox to signify a yes/no answer to some question or statement. We set up a label, a checkbox input type, and fetch the boo
onsubmitやonclickで処理を中断させる方法(return false) - (ﾟ∀ﾟ)o彡 sasata299's blog
2010年01月11日22:30 JavaScript onsubmitやonclickで処理を中断させる方法(return false) よく、リンクで onclick とか、フォームで onsubmit とかするじゃないですか。それで、今回もこんな感じのことをやろうと思ったんです。 テキストが空だったら警告を出して処理を中断する テキストが空じゃなかったらアクションを実行する 「onsubmit の返り値が false なら submit の処理が中断されるだろう」と思ってさくっとこんな感じに書いてみました。いたってシンプルです。 <script type="text/javascript"> function blank_check() { if (document.getElementById('name').value == "") { alert("ﾆｭｳﾘｮｸｰヽ(ﾟ∀ﾟ)ﾉ
はてなブログでのLaTeX
はてなブログでは、[tex:f(x)=x^2+1]などとしてLaTeXの数式が記述できますが、いくつか困ったことがあります。 (1) [tex:a>b]とすると、[tex:a>b]に変換されてしまい、思うような結果が得られない。 (2) [tex:\begin{array}{r}a&b\\c&d\end{array}]とすると、[tex:\begin{array}{r}a&b\\c&d\end{array}]に変換されてしまい、思うような結果が得られない。 (3) [tex:\square]も、[tex:\Box]も、[tex:\mbox{□}]も認識されない。 (4) ブラケット記法の内積<φ|A|φ>を記述するときに、\left\rightではうまくいかないので独自にコマンドを作るか、パッケージを用いたいが、どうすればいいかわからない。 いずれの問題も、どうにもな
長い数式において改行を行い、見やすく入力する：Excel 一般｜即効テクニック｜Excel VBAを学ぶならmoug
長い数式において改行を行い、見やすく入力する (Excel 2000/2002/2003/2007/2010/2013/2016) ツイート 文字列を入力する際、[Alt] + [Enter]キーにて自由に改行を行うことが出来ますが、数式を入力する際にも同様に改行を行うことが可能です。 例えば、 =IF(ISNA(VLOOKUP(A2,J2:K100,2,FALSE)),"",VLOOKUP(A2,J2:K100,2,FALSE)) のように長い数式も、下記のように改行を入れると見やすくなり、理解が容易になります。 =IF( ISNA(VLOOKUP(A2,$J$2:$K$100,2,FALSE)), "", VLOOKUP(A2,$J$2:$K$100,2,FALSE)) なお、改行できるのは引数を区切るカンマ（,）の後ろや演算子の前などで、無闇に改行を入れると計算式はエラーとなります。
Perl5 で irb 相当のことをする方法、すなわち REPL をする方法 - tokuhirom's blog
Perl5 で REPL(Read-Eval-Print-Loop)をつかいたければ、perl -de 1 をつかえばいい。 perl5 についているデバッガ機能をつかえば、一応 REPL っぽいことはできるので、以下のようにしてつかう。 % perl -de 1 Loading DB routines from perl5db.pl version 1.33 Editor support available. Enter h or `h h' for help, or `man perldebug' for more help. main::(-e:1): 1 DB<1> print 3+2; 5 DB<2> ただしこの場合、lexical 変数が保存されないのでたとえば以下のコードは意図したとおりにはうごかない。 DB<1> my $x =1; DB<2> print $x, "\n"
Office TANAKA - Excel VBA Tips[UserFormでツールバーを使う]
登録できる画像はbmp形式などです。サイズに注意して、ご自分で作成するか、既存のツールバーをキャプチャして使いましょう。ただし、ツールバーのボタン画像にも著作権が発生します。自分だけで使うUserFormなら問題ないですが、第三者に配布するときや販売するときなどには、著作権に十分留意してください。 上図はImaeListを配置したところです。実行時には表示されないコントロールですから、配置する場所はどこでもけっこうです。 ImageListを選択すると、[プロパティ]ウィンドウに[(プロパティページ)]という項目が表示されます。 ここの右端にある[...]ボタンをクリックすると、[プロパティページ]ダイアログボックスが表示されます。 [イメージ]タブを開き、[ピクチャの挿入]ボタンをクリックします。 [図の選択]ダイアログボックスで「open.bmp」を選択して[開く]ボタンをクリックしま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CSS】HTMLのテキストボックスをラベルのように
サービス終了のお知らせ
Excel VBA を学ぶなら moug モーグ｜