トグルボタン(ToggleButton)知ってますか？

Question

![イメージ説明]WIDTH:600

チェックボックスでもなくラジオボタンでもなく、
ボタンを押下したら、色が変わるなどの動作があって、
選択されている状態にすることは可能でしょうか。

下記のサイトで、ToggleButton(トグルボタン)というものを見つけましたが、Androido専用な気がして。
http://techbooster.jpn.org/andriod/ui/9445/

もっともふさわしいのはどういうものがありますでしょうか。

Androido,iOS,W8で使いたいです。
現在、php、cssで書いています。
宜しくお願い致します。

Answer 1

こんにちは。

ご推察のとおりリンク先はAndroidのものですね。

ちょっと調べてみたところだと、
HTMLの場合では、チェックボックス・ラジオボタンを使って、
スタイルシートで見た目をボタンチックにする方法があるようです。

以下を参考にトライしてみてください。
http://blog.mach3.jp/2014/11/04/toggle-button.html
http://blog.mach3.jp/2012/07/31/graphical-togglebutton-by-radio-input.html

Comments

[b1ackc0ffee]

的確なコメントありがとうございます！
私には、リンクは難解な用語がたくさん使用されていて、私にはレベルが高すぎましたが、
解読できるように頑張ります。
[jQueryプラグインにまとめてみる]とか何のことかさっぱりです。

Answer 2

W8ってなんでしょうか？

HTMLには標準でトグルボタンは容易されていません。
なので、実装方法としては
①radioやcheckboxのデザインをトグル風にCSSで変更するか、
②ドルグ用のCSS要素クラスを作成して実装する方法があります。

①についてはJqueryのプラグインなどでradioやcheckboxをトグルに変更する事が可能です。
http://blog.mach3.jp/2014/11/04/toggle-button.html

②についてはbootstrapなどでトグルボタンが提供されています。
（下記URLのButtonsに）
https://bootswatch.com/default/

Comments

[b1ackc0ffee]

コメント有難うございます★
W8はWindows8です！

リンクありがとうございます。
Jqueryって言語ですか？
素人なので、理解できずすみません。
bootstrapも言語ではありませんか？

htmlとcssとphpのみで作成したいです。
宜しくお願い致します。

[chiku_]

jqueryとbootstrapはDOM操作の簡易化やデザイン用フレームワークです。
Tak1waさんが参考で上げてくれているURLで理解が難しいようでしたら、申し訳ありませんが、お力添えになれそうにありません。

[b1ackc0ffee]

Cssだけではできないでしょうか。
現在のコードですが、ボタンにならず、チェックボックスと、テキストだけがむき出しです。
テキスト部分をクリックすることはできますが、背景やボタン(丸角)ができません。
----------------------------------------------------------
//　チェックボックスの編集

.place_check {
display:none;
}
.place_check_area input[type="checkbox"] + label {
display: block;
background-image: url();
background-size: 24px;
background-position: left center;
background-repeat: no-repeat;
padding: 4px 0 0 28px;
}

.place_check_area input[type="checkbox"]:checked + label {
background-image: url();

<s:GradientEntry color="0xb3b3b3"
color.down="0x438c5f"
alpha="0.5"
alpha.down="0.8"/>
<s:GradientEntry color="0xb3b3b3"
color.down="0x438c5f"
alpha="0.75"
alpha.down="1"/>

shadow: 10px 10px 10px rgba(0,0,0,0.5);
----------------------------------------------------------
宜しくお願い致します。