Why does the Checkbox look like that?

Question

https://test.terminbuch.eu/massimo/termine

After you click "Registrieren", on the right you see a very small checkbox. It doesn't look like a normal checkbox. And its very small, although the Developer Tools show no rules for checkboxes.

Any ideas?

Questions asking us to suggest, find or recommend a book, tool, software library, plug-in, tutorial, explain a technique or provide any other off-site resource are off-topic for Stack Overflow Stack Overflow — Paulie_D, Aug 04 '16 at 16:04

andreas · Answer 1 · 2016-08-04T16:22:46.930

2

It's because you use display: inline-flex on the .checkbox class. Specify a flex attribute for the checkbox input element and it will work:

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

edited Aug 04 '16 at 16:22

answered Aug 04 '16 at 16:15

andreas

16,357
12
72
76

1

You are right! I haven't even noticed the `inline-flex` as it doesn't make any sense to use flexbox in this situation... – Pipo Aug 04 '16 at 16:59

score 1 · Answer 2 · answered Aug 04 '16 at 16:08

1

add width:100px; in framework.css at line number 106 and class name .checkbox-cb. it will helps you.

you need to change below listed class.

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

answered Aug 04 '16 at 16:08

Gaurang Joshi

684
16
32

score 1 · Answer 3 · edited May 23 '17 at 11:59

It is a normal checkbox. It's 13px x 13px in Firefox which is the default checkbox size on this browser. I've isolated the code below so that you can play with it in different browsers:

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

If you want to change the checkbox size with only CSS there is a good topic here on SO: Checkbox size in HTML/CSS

I think it doesn't reproduce the problem, because the checkbox is not as tiny as on his website... — andreas, Aug 04 '16 at 16:23

Why does the Checkbox look like that?

3 Answers3