Can I create checkbox &amp; radiobuttons without labels?

Topic: Can I create checkbox & radiobuttons without labels?

twj priority asked 5 years ago

I want to create a poll, my poll's structure has one label at the top and user choises at the bottom. Briefly speaking, I want to create a couple of radioboxes and checkboxes without label (text bound to them).

If I create, for example, something like this:

<div class="form-check">

<input type="checkbox" class="form-check-input" id="someID">

<label class="form-check-label" for="someID">Label goes here</label>

</div>

I get everything work fine, but when I create the same without label (when I need checkbox only):

<div class="form-check">

<input type="checkbox" class="form-check-input">

</div>

I get nothing ... or just unclickable checkbox/radiobutton (if set opacity to 1 using style inside element).

The same happens with radiobuttons.

Please help me with this, am I doing something wrong or I can't create empty checkboxes and labels using MDB?

Thanks in advance for your help!

Add comment

Marta Wierzbicka staff answered 5 years ago

0 0 Best answer

Hi,

to modify MDB styles you need to use gulp version of our package. When you use the standard one, you use only mdb.css and mdb.min.css files and it is hard to modify one big file to remove MDB styles. If you don't want MDB styles for checkboxes, I can try to change your mdb.css file. You can send me your MDB package to m.szymanska@mdbootstrap.com and I'll try to help you.

Best, Marta

Add comment

aeromir free answered 5 years ago

0 0 Best answer

I don't use Gulp. How would I remove the checkbox, input, select etc formatting from mdb.css?

Add comment

Marta Wierzbicka staff answered 5 years ago

0 0 Best answer

Hi,

if you use Gulp version of MDB, just comment in mdb.scss this line: @import "pro/checkbox";. Then, you will remove material styles for checkbox and you could use a checkbox without a label.

Best, Marta

Add comment

Marta Wierzbicka staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi,

I see the problem but for not it is not possible to have a checkbox without a label because style settings assigned to a label are responsible for a look of the whole checkbox. You can see that when you open the browser console and inspect eg. <label for="answer_2"> ::before ::after </label>. You will see that there are styles for checkbox before and after a click, which means before or on active state. For now, we don't have a workaround for this but I'll add this idea to our "ideas board" and we will think for a better solution for the checkbox in the future.

Best, Marta

twj priority commented 5 years ago

Thanks for your answer! So, if I can't use MDB for checkboxes without labels, can I use MDB styles on page and somehow use traditional checkboxes instead of packed in MDB styles?

Add comment

Marta Wierzbicka staff answered 5 years ago

0 0 Best answer