How to style the checkbox label

Topic: How to style the checkbox label

Tenarius free asked 4 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?

Add comment

Magdalena Dembna staff answered 4 years ago

0 0 Best answer

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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

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

Tenarius

152Support score
8Questions 11Answers 1Snippets