Magento 2: How to add custom css class in Checkout shipping address form

Question

Want two input fields in one Line on checkout page. Looks like it is binded by knockoutjs. Didn't figure out where to add custom classes. Looked into so many files (Magento_Ui and Magento_Checkout) but didn't found anything to change the classes. Please help me out in making the following shipping address template.

@Manoj where to add css class in checkout shipping form. Which File? — Vinay, Nov 03 '17 at 12:15
Any custom css you can add in "_extend.less" for any any page ..the best magento way..state in 1st way.... 2nd you can add bootstrap in your project and use bootstrap classes — Manoj Deswal, Nov 03 '17 at 12:17
@Manoj but there is no div added in checkout page. I will write the css if there is specific div. How to add div in Checkout Shipping Address Form fields. — Vinay, Nov 03 '17 at 12:18
start debug mode from admin and find out the file , where you can add div or custom classes — Manoj Deswal, Nov 03 '17 at 12:19
@Manoj On Checkout Page Fields are not showing any file paths. I got onepage.phtml but there is nothing to write divs. I think all the shipping address form template is called by knockoutjs. — Vinay, Nov 03 '17 at 12:28
Yes they come but still you can tweaks the CSS , once I done on browser only. Need little work with CSS ...you need to debug and write smart CSS to manipulate — Manoj Deswal, Nov 03 '17 at 12:29
I have made that on browser as well but didn't found the exact files to add div. If i found the path then i can easily make this. But the issues is i don't know where to add div classes. All div in fields are coming like this - 1. "
" 2. "
" — Vinay, Nov 03 '17 at 12:34
Assign a parent class to the page , now write sudo-css for field set and field classes, accordingly ... like floating and width adjust ...set for each child ... separately — Manoj Deswal, Nov 03 '17 at 12:34
this is page class "checkout-index-index" . take it as parent class then write css for childs .... can be done easily no worry — Manoj Deswal, Nov 03 '17 at 12:36
@Manoj Let me try this way and post the css code if i am able to make that :) — Vinay, Nov 03 '17 at 12:37
You try that way and could be succeed... i might post the code but I am not on my workstation so just can guide you ... ".checkout-index-index .form-shipping-address .field{}" .. this will be your first class for first name ... rest you can use child css on same line — Manoj Deswal, Nov 03 '17 at 12:39

score 1 · Accepted Answer · answered Nov 03 '17 at 17:21

Enter the css code in custom.css to achieve design mention in question image (checkout shipping fields). It will make all fields to half except Street Address

.checkout-index-index .form-shipping-address #shipping-new-address-form {
            .field {
                &:nth-child(2n+1) {
                    width: 49%;
                    float: left;
                }
                &:nth-child(2n) {
                    width: 49%;
                    float: right;
                }
            }
            fieldset {
                width: 100% !important;
                div.field {
                    width: 100% !important;
                }
            }
        }

Awesome, It works for me. – Pratik Mehta Jan 21 '20 at 10:19 — Pratik Mehta, Jan 21 '20 at 10:19
may i know the path of this file plz – Sayyed Hasan Apr 07 '20 at 07:54 — Sayyed Hasan, Apr 07 '20 at 07:54

Magento 2: How to add custom css class in Checkout shipping address form

1 Answers1

Linked