チェックボックスをボタンに！

kintone カスタマイズ
1

お世話になっております。
下記のサイトを参考にチェックボックスをボタンとして表示したいのですが、旧レイアウトでのCSS例のようで新レイアウトではラベルは変更されますがチェック部分が非表示になりません。
どのようにすればよいのでしょうか？
ご教示お願いします。

http://qiita.com/rex0220/items/74d7b125be6b9c8a10af

2

kubo さん

新デザイン版を追加しましたので、試してください。

 

文字の長さによって、 padding: 6px 40px 3px 30px !IMPORTANT; /* 文字位置 */ を調整してください。

.input-checkbox-item-cybozu label,
.input-checkbox-item-cybozu input:checked+label:after,
.input-checkbox-item-cybozu label:before {
box-shadow: initial;
margin-left: 0;
}
.input-checkbox-cybozu input{
border: initial !IMPORTANT;
padding: initial !IMPORTANT;
width: 0px;
}
.input-checkbox-item-cybozu label {
padding: 6px 40px 3px 30px !IMPORTANT; /* 文字位置 */
margin-top: 3px;
display: block;
width: 40px;
height: 24px;
text-align:center;
font-weight: bold;
color: #fff;
background: #3498db;
-webkit-border-radius:4px;
-mozborder-radius:4px;
border-radius:4px;
cursor:pointer;
}
.input-checkbox-item-cybozu:hover label {
color: #fff;
background-color: #1d6fa5;
}
div.input-checkbox-cybozu,
span.input-checkbox-item-cybozu {
padding: 0 !IMPORTANT;
height: 40px;
}
.input-checkbox-cybozu {
/*color: #3498db;*/
border: initial !IMPORTANT;
}
.input-checkbox-item-cybozu.focused {
border: initial !IMPORTANT;
}
3

rex0220 さん

CSSのコード、助かります。

確認してみます。

ありがとうございました。

4

お世話になります。

光澤と申します。

この記事を参考にチェックボックスをボタン化にしようと試みました。

しかしどうしてもチェック部分が非表示になりません。

（チェックボックスの非表示以外は反映されている。）

 

お手数をおかけしますがご教授いただければ幸いです。

 

ソース↓↓↓

(function() {

    “use strict”;
    var events = [
        “app.record.create.show”,
        “app.record.edit.show”
    ];

    kintone.events.on(events, function(event) {
        
        // 登録チェックのスタイル変更
        $(“div.control-value-gaia.value-5351913>div.input-checkbox-cybozu”).css({
            “display”: “block”,
            “background”: “#3498db”,
            “font-weight”: “bold”,
            “color”: “#fff”,
            “width”: “200px”,
            “height”: “50px”,
            “text-align”:“center”,
            “border-radius”:“4px”,
        });
       
        $(“div.control-value-gaia.value-5351913>div.input-checkbox-cybozu>span.input-checkbox-item-cybozu label”).css({
            “color”: “#fff”,
            “text-align”:“center”,
            “font-size” : “22px”
        });
       

//  ↓↓どうも以下のソースが反映されていない感じです。
        $(“div.control-value-gaia.value-5351913>div.input-checkbox-cybozu>span.input-checkbox-item-cybozu input”).css({     
            “border”: “initial !IMPORTANT”,
            “padding”: “initial !IMPORTANT”,
            “width”: “0px”
        });

        return event;
    });
})();

5

光澤さん

チェックボックスをボタン化するのに特に条件もないようですので、

jQuery で動的に CSS を変えるのではなく、CSS ファイルをそのまま登録してみてください。

6

rex0220様

たちまちCSSファイルをそのまま登録したところ、** チェックボックスが消えたことを確認できました。**

それをベースに手を加えていけば何とか思い通りの画面を作成できそうです。

本当にありがとうございました。

7

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。