2016-08-04 91 views
-1

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

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

任何想法?

+0

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

回答

1

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

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

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

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

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

不錯, 非常感謝! – aeroncy

+1

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

1

這是一個普通的複選框。在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

+0

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

相關問題