從網站適應CSS樣式到一個Django香脆形式複選框

我使用的引導，我在裏面有一個複選框的Django香脆的形式，在html看起來是這樣的：從網站適應CSS樣式到一個Django香脆形式複選框

<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>

我無法適應以下CSS類此呈現的HTML，該複選框是完全不透明的，當加下面的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>

來源

2017-03-29 cj1689262

你有控制脆皮產量嗎？ – Will

相當有限的控制，我可以將整個form-group包裝在一個div中，或者包含一個用於輸入checkboxinput的css_class。另外，我在技術上可以寫我自己的模板來格式化表單字段的具體方式（我以前從未嘗試過）。儘管事實並非如此，但我並不擅長應用css，並且一直無法將該css應用到默認引導複選框（沒有我脆弱的表單佈局）。 – cj1689262

那麼，有沒有偷懶的辦法來做到這一點。我通過確保我遵循我在帖子中引用的嵌入式應用css提供的html佈局來解決此問題，然後定製我的crispy表單字段模板以確保它使用正確的佈局呈現html：

<div class="input-wrapper inline"> 
    <div class="checkbox-wrapper"><input class="checkbox" type="checkbox" id="check1" name="check1" value=""><span class="checkbox-styled"></span></div> 
    <label for="check1">Check 1</label> 
</div>

來源

2017-03-31 19:36:41 cj1689262

從網站適應CSS樣式到一個Django香脆形式複選框

回答

相關問題