Topic: How to style the checkbox label
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?
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 10 months 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 10 months 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.
Answered
- User: Free
- Premium support: No
- Technology: Vue
- MDB Version: 6.7.1
- Device: PC
- Browser: Firefox
- OS: Windows 10
- Provided sample code: No
- Provided link: No