Topic: How to style the checkbox label

Tenarius free asked 4 years ago

Simple Question: How to style the checkbox label?



data() {
    return {
        fields: {
            privacy: false,
        checkboxlabel: "My checkbox privacy text..."


.checkbox label {
    color: yellow !important;

Scss dont work... . Anyone an idea?

Magdalena Dembna staff answered 4 years ago

If you're trying to style the box (not the text), you need to select the after pseudo element:

.checkbox label:after {
  background-color: yellow!important;

Let me know if this solution works for you. Best regards, Magdalena

Tenarius free commented 4 years ago

Hi, i want to style the text-size of the label. Unfortunately, your solution doesn't work for me. At the moment, I use an workaround: mounted() {$('.form-check-label').css("font-size", "12px").css("line-height", "24px");}

Magdalena Dembna staff commented 4 years ago

For changing the font size, the following selector works for me: .checkbox label { font-size: 62px!important; } . Make sure that your style opening tag doesn't have a scope attribute (or create another one without). If you're creating separate files for SCSS make sure that the imports in main.js are in the right order.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.7.1
  • Device: PC
  • Browser: Firefox
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No