How to apply Custom CSS on magento 2 checkout page(shipping and checkout)

Question

i have added two fields in my magento 2 checkout at shipping address tab. My fields are check boxes and and i want to add some css to those check boxes therefore i have added custom css file but as i observer css gets applied after the page load. Magento checkout is totally based on knockout js and other dependencies that why my css is not getting applied. i have added a hook.js and that js file is getting applied. i have also tried to add Css using jQuery.

 $("[name='shippingAddress.custom_attributes.displaynewsfeed']").css("padding-left","20%");
 $("[name='shippingAddress.custom_attributes.displayreceipt']").css("padding-left","20%");

But this is not getting applied so i have tried another method in jQuery which delayed the function for 2 seconds its working but its not acceptable. Is there any solution where i can add CSS withing the form load not after some seconds or before Form load.

Small Help will be Greatly Appreciated. Thanks in Advanced :)

• Roshan Rakesh Yadav: Check this out --> magento.stackexchange.com/questions/199962/…
• Sarvesh Patel: so you want to add CSS in checkout page?
• Yasir Latif: do you have url

Answer 1

Why didn't you use css for this? (add to your theme):

input[name='shippingAddress.custom_attributes.displaynewsfeed'] { padding-left:20% }

input[name='shippingAddress.custom_attributes.displayreceipt'] { padding-left:20% }

• Sayyed Hasan: If i add custom css to my theme's css files will it solve my problem. And will that css will apply all the magento 2 checkout fields load via knocoutn js and ajax