Topic: Can I create checkbox & radiobuttons without labels?
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!
Hi,
would you create an example of what you want to achieve in the snippet here: https://mdbootstrap.com/snippets/? I'll try to help you.
Best, Marta
twj pro premium priority commented 6 years ago
Sure, here is it: https://mdbootstrap.com/snippets/jquery/twj/409293
I've also added some comments there, in the first examples there are no checkboxes shown
Thanks!
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 pro premium priority commented 6 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?
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
I don't use Gulp. How would I remove the checkbox, input, select etc formatting from mdb.css?
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB jQuery
- MDB Version: 4.7.3
- Device: Any
- Browser: Any
- OS: Any
- Provided sample code: No
- Provided link: No