爲什麼複選框看起來像這樣？

-1

https://test.terminbuch.eu/massimo/termine 爲什麼複選框看起來像這樣？

單擊「Registrieren」後，右側顯示一個非常小的複選框。它看起來不像普通的複選框。儘管開發工具顯示覆選框沒有規則，但它非常小巧。

任何想法？

來源

2016-08-04 aeroncy

問題要求我們建議，查找或推薦一本書，工具，軟件庫，插件，教程，解釋技術或提供任何其他異地資源，都是偏離主題的堆棧溢出堆棧溢出 –

add width:100px; in framework.css at line number 106 and class name .checkbox-cb。它會幫助你。

您需要更改以下列出的類別。

.checkbox-cb { 
    margin-right: 8px; 
    cursor: pointer; 
    width: 40px; 
}

來源

2016-08-04 16:08:38

這是因爲你在.checkbox類使用display: inline-flex。爲複選框輸入元素指定一個flex屬性，它將起作用：

.checkbox-cb { 
    margin-right: 8px; 
    cursor: pointer; 
    flex: 0 0 auto; 
}

來源

2016-08-04 16:15:35 andreas

不錯，非常感謝！ – aeroncy

你是對的！我甚至沒有注意到'inline-flex'，因爲在這種情況下使用flexbox沒有任何意義... – Pipo

這是一個普通的複選框。在Firefox中這是13px x 13px，這是此瀏覽器的默認複選框大小。我已經分離出下面的代碼，這樣就可以在不同的瀏覽器與它玩：

.agbCheckbox { 
 
    height: 80px; 
 
    font-size: 11px; 
 
} 
 

 
.checkbox { 
 
    display: inline-flex; 
 
    align-items: center; 
 
    cursor: pointer; 
 
} 
 

 
.checkbox-cb { 
 
    margin-right: 8px; 
 
    cursor: pointer; 
 
}

<div class="agbCheckbox checkbox" id="77"> 
 
    <input class="checkbox-cb" id="77-cb" type="checkbox"> 
 
    <span class="checkbox-text" id="77-text">Den Inhalt der <a id="agbLink" href="">AGB und Datenschutzerklärung</a> habe ich zur Kenntnis genommen und erkläre mich damit einverstanden.</span> 
 
</div>

如果你想只用CSS來改變大小複選框這裏有一個很好的話題上SO ：Checkbox size in HTML/CSS

來源

2016-08-04 16:18:00 Pipo

我認爲它不會重現該問題，因爲複選框不像他那樣小網站... – andreas

爲什麼複選框看起來像這樣？

回答

相關問題