How to style the checkbox label


Topic: How to style the checkbox label

Tenarius asked 2 years ago

Simple Question: How to style the checkbox label?

 <mdb-input 
    type="checkbox" 
    id="checkbox" 
    name="privacy" 
    v-model="fields.privacy" 
    :label="checkboxlabel" 
    required
  />

DataObj:

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

Scss:

.checkbox label {
    color: yellow !important;
}

Scss dont work... . Anyone an idea?


Magdalena Dembna staff premium answered 2 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 commented 2 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 premium commented 2 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.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: 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