いちばん失敗した人決定戦

詳しい人求む！

checkboxのチェックマークカスタマイズ（css）

解決済

前回に引き続き、checkboxにslidetoggleを使用し、
チェックボックス（複数個）をカスタマイズしていますが、チェックマークがつかないです。
afterの定義ができていないので教えて下さい＞＜
----------

<div id="wrap">

<div class="slide_wrap">
<label><input type="checkbox" value="" />title</label>
<div class="slide_box">here</div>
</div>

<div class="slide_wrap">
<label><input type="checkbox" value="" />title</label>
<div class="slide_box">here</div>
</div>

----------
<style>
input[type="checkbox"] { /* defaultのcheckbox */
display: none;
}

label {
position: relative;
display: inline-block;
padding: 3px 3px 3px 22px;
cursor: pointer;
}

label::before {
position: absolute;
content: '';
top: 50%;
left: 0;
width: 14px;
height: 14px;
margin-top: -8px;
background: #fff;
border: 1px solid pink;
}
input[type="checkbox"]:checked + label::after {
position: absolute;
content: '';
top: 5px;
left: 3px;
width: 13px;
height: 5px;
border-left: 2px solid #3498db;
border-bottom: 2px solid #3498db;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
-------

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

参考程度に

No.2ベストアンサー

  • 回答者： fujillin
  • 回答日時：

ANo1です。



およその雰囲気がわかってきましたが、どうやらinput要素やlabelは必ずしも必要ではなさそうな気がしましたので、スクリプト利用で開閉とチェックを行う例を作成してみました。ご参考までに。
（HTMLの表示内容は同じですが、全体に簡略化しました。
　チェックボックスの制御は#1の最後の方に書いた方法です。）

dt要素にchekedクラスを設定するとチェックボックスにチェックが入るようにしておいて、スクリプトからはクラスの制御だけを行っています。
全体的な印象では、なんとなくチェック/非チェックが逆のような気もしましたが、ご提示の動作のままにしてあります。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<style type="text/css">
.slide{ padding-left: 25px; }
.slide dt{
position: relative;
margin: 1em 0 0 0;
cursor: pointer;
}

.slide dd, .slide dt:first-child{
margin: 0;
}

/* チェックボックス枠 */
.slide dt::before{
position: absolute;
content: '';
top: 0;
left: -25px;
width: 16px;
height: 16px;
border: 1px solid #F6F;
border-radius: 4px;
}

/* チェックマーク */
.slide dt.cheked::after{
position: absolute;
content: '';
top: 5px;
left: -22px;
width: 10px;
height: 4px;
border: 0 solid #28A;
border-width: 0 0 3px 2px;
transform: rotate(-45deg);
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2. …

<script type="text/javascript">
$(document).ready(function(){
$(".slide dt").on("click", function(){
var f = $(this).hasClass("cheked");
if(f) $(this).removeClass("cheked").next().slideDown();
else $(this).addClass("cheked").next().slideUp();
});
});
</script>
</head>
<body>

<dl class="slide">
<dt>title1</dt>
<dd>content1</dd>

<dt>title2</dt>
<dd>content2</dd>

<dt>title3</dt>
<dd>content3</dd>

<dt>title4</dt>
<dd>content4</dd>
</dl>

</body>
</html>

※ #1にも書きましたが、CSSのみでもほぼ同様のものが実現可能です。
　 そちらのスタディは質問者様にお譲りします。(笑)
    • good
    • 0
    • 件
通報する
この回答へのお礼

昨日に引き続き、ご回答ありがとうございました！！
うまくカスタマイズできました！！（；；）
次は、レイアウト上で問題がでてきてしまったので、別で投稿をします。
お力添え頂けたら嬉しいです。

通報する
お礼日時：2017/04/25 21:45

参考程度に

No.1

  • 回答者： fujillin
  • 回答日時：

こんにちは



CSSのご質問はCSSのカテゴリーの方がよろしいかと（笑）
CSSはよくわかっていませんが・・・

＞afterの定義ができていないので教えて下さい
ご提示のCSSは、隣接セレクタを用いて
＞input + label::after
となっていますが、after以前に、HTMLに該当するlabel要素がないので適用されないのが原因だと思います。
対処方法はいろいろ考えられると思いますが…

1）現状のCSSを生かすなら、HTMLを
<input id="hoge" type="checkbox" value="" />
<label for="hoge">title</label>
のような形式にすれば、隣接セレクタが生きるので、そのままで実現できると思います。

2）現状のHTMLを生かそうとした場合は、input::afterが使えればそのままでも良いのですが、そうはいかないので
<label><input type="checkbox" value="" />
<span>title</span></label>
などのように、隣接セレクタが使える形に変えて、CSSは
input[type="checkbox"]:checked + span::before
とすることでも可能でしょう。

3）どうせ要素を追加するなら
<label><input type="checkbox" value="" />
<span class="check_mark">✓</span>title</label>
のようにして、チェックマークを明示しておくこともできそうです。
span.check_mark{ display: none; }
input[type="checkbox"]:checked + span.check_mark{ display:block; }
とすれば、同様の効果になります。（↑表示位置の調整は省略しています）
上の例では、文字の「✓」でマークの代用をしていますが、特殊なチェックマークを画像にして代えることも可能でしょう。
（手書き風のチェックマークとか複数のボックスをチェックしてゆくとレインボーカラーになるとか）
もっとも、1）、2）の方法でも背景を利用すれば同様のことは可能ですが…


一方で、前のご質問ではdiv.slide_boxの開閉にjavascriptを用いていたと思いますので、非表示のinput要素を作成してまでチェックの状態をCSSで実現しなくても、スクリプトからチェック状態と非チェック状態を入れ替えるだけでも、同様の効果は簡単に実現できます。（送信したり、表示したりしないなら、input要素も不要です）
（クラス設定だけでも良さそうですし、画像を入れ替えるのもありかと）
あるいは、頑張ってCSSだけで開閉機能も併せて実現してしまうという方法もあるでしょう。
http://qiita.com/takanorip/items/217f9c29715825d …
    • good
    • 0
    • 件
通報する
この回答へのお礼

昨日に引き続き、ご回答ありがとうございました！！
うまくカスタマイズできました！！（；；）
次は、レイアウト上で問題がでてきてしまったので、別で投稿をします。
お力添え頂けたら嬉しいです。

通報する
お礼日時：2017/04/25 21:45

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報