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 5 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 5 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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