Can I create checkbox & radiobuttons without labels?


Topic: Can I create checkbox & radiobuttons without labels?

twj asked a year 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!


Marta Szymanska staff pro premium answered a year ago

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 commented a year 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!


Marta Szymanska staff pro premium answered a year ago

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 commented a year 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?


Marta Szymanska staff pro premium answered a year ago

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


aeromir pro premium answered a year ago

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


Marta Szymanska staff pro premium answered a year ago

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


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.7.3
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: No