0
にウェブサイトからCSSスタイルを適応させる、私はそれのチェックボックスとジャンゴクリスピーフォームを持っている、HTMLは次のようになります。は、私は、ブートストラップを使用していますジャンゴクリスピーフォームのチェックボックス
<div class="form-group">
<div class="checkbox" id="div_id_include">
<label class="" for="id_include"><input class="checkboxinput" id="id_include" name="include" type="checkbox"> Include some data.</label>
</div>
</div>
私はトラブル適応を持っていますこのレンダリングされたHTMLに、次のCSSクラスは、チェックボックスが完全に不透明であり、以下のCSSが適用されたときに表示されていない。
CSS
.checkbox-wrapper {
position: relative;
}
td .checkbox-wrapper, th .checkbox-wrapper {
margin: 0 0 0 6px;
}
.checkbox, input[type=checkbox].checkbox, .checkbox-styled {
display: block;
position: relative;
height: 16px;
width: 16px;
border: 1px solid #d3dbe2;
background-color: #ffffff;
margin: 0;
box-sizing: border-box;
vertical-align: middle;
}
.checkbox, input[type=checkbox].checkbox {
z-index: 2;
opacity: 0
}
.checkbox-styled {
border-radius: 3px;
z-index: 1
}
.checkbox-styled:after {
content: "";
display: block;
height: 10px;
width: 10px;
position: absolute;
top: 50%;
left: 50%;
background-color: transparent;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
-webkit-transform: translate(-50%, -50%) scale(0);
-ms-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
-webkit-transition: -webkit-transform 0.15s ease-in-out;
transition: transform 0.15s ease-in-out;
z-index: 2
}
.checkbox:active ~ .checkbox-styled, .checkbox:focus ~ .checkbox-styled {
border-color: #479ccf
}
.checkbox:checked ~ .checkbox-styled:after {
-webkit-transform: translate(-50%, -50%) scale(1);
-ms-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1)
}
.checkbox:indeterminate ~ .checkbox-styled:after {
-webkit-transform: translate(-50%, -50%) scale(1);
-ms-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1)
}
.checkbox-styled:after {
background-image: url(data:image/svg+xml;charset=US- ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20enable-background%3D%22new%200%200%2024%2024%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3Ecircle%2Cellipse%2Cline%2Cpath%2Cpolygon%2Cpolyline%2Crect%2Ctext%7Bfill%3A%23479ccf%20%21important%3B%20%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M23.6%205L22%203.4c-.5-.4-1.2-.4-1.7%200L8.5%2015l-4.8-4.7c-.5-.4-1.2-.4-1.7%200L.3%2011.9c-.5.4-.5%201.2%200%201.6l7.3%207.1c.5.4%201.2.4%201.7%200l14.3-14c.5-.4.5-1.1%200-1.6z%22%2F%3E%3C%2Fsvg%3E)
}
.checkbox:indeterminate ~ .checkbox-styled:after {
background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%20enable-background%3D%22new%200%200%2012%2012%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3Ecircle%2Cellipse%2Cline%2Cpath%2Cpolygon%2Cpolyline%2Crect%2Ctext%7Bfill%3A%23479ccf%20%21important%3B%20%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M6%200%22%2F%3E%3Cpath%20d%3D%22M.8%207C.3%207%200%206.7%200%206.2v-.4c0-.5.3-.8.8-.8h10.5c.4%200%20.7.3.7.8v.5c0%20.4-.3.7-.8.7H.8z%22%2F%3E%3C%2Fsvg%3E)
}
スタイルはこちらから：Shopify embedded app css（チェックボックスの例も参照してください）。私は（テーブル行以内）HTMLを直接クリスピーフォームが、私の出力を使用しないでください。この作業している場合
は：
<td>
<div class="checkbox-wrapper"><input class="checkbox" type="checkbox" id="id" name="" value="id"><span class="checkbox-styled"></span></div>
</td>
Crispyの出力を制御できますか？ – Will
かなり限定されたコントロールで、div内のフォームグループ全体をラップすることも、入力用のcss_classを含めることもできます。別の方法として、私は技術的に独自のテンプレートを書いて、フォームフィールドを特定の方法でフォーマットすることができます（私はこれまで試みたことがありません）。私は事実の後でCSSを適用することはあまりよくありませんし、デフォルトのブートストラップチェックボックスにもそのCSSを適用するのに問題がありました。 – cj1689262