Checkout text box border

[mythandmagic]

Hi,

Can someone please advise on where you change the border and weight on the text fields within the checkout?

I'm guessing it is controlled by <div class="InvoiceField" > and InvoiceField wideInput,? but I cant find where either of these are to change.

Edit: On the image below I'm looking to get the invoice and delivery text boxes the same as the password boxes. they are slightly taller and with lighter border. but would like them to all be the same.

[graphicz]

Try adding this to the bottom of the 'Current Stylesheet':

.InvoiceField input {
background-color: field!Important;
padding: .3em!Important;
}

Or you could use ideas from here:
https://www.w3schools.com/css/tryit....e=trycss_forms

[mythandmagic]

Thanks Jonathan,

Tried that and uploaded site, but seems that did not change anything.

[graphicz]

I don't know where you have added those styles but it is not to the current stylesheet: Right click and inspect element thus:

[MDN]

Try adding this to your style sheet:

.InvoiceField input, .DeliverField input {border: 1px solid #bbb;}

Change #bbb to whatever border color you want.

EDIT, added padding and radius:

.InvoiceField input, .DeliverField input {border: 1px solid #666;padding: 5px 0px;border-radius: 2px;}

[mythandmagic]

Thanks Lee, but that also does not work.

Like Jonathan shows, It's not controlled by css and reading the style from somewhere else, maybe one of the .pl files. Although not sure I should start messing with those.

Its not something I've added, that is just the standard smart checkout.

[MDN]

Do a hard refresh (Firefox ctrl and F5) and you'll see it has worked, just need to tweak the drop down..

[MDN]

Add this to your style sheet:

.InvoiceField select, .DeliverField select {border: 1px solid #666;border: 1px solid #666;  padding: 5px 5px;  border-radius: 2px;}

That will also style the drop down, also in the css I gave in my first post:

.InvoiceField input, .DeliverField input {border: 1px solid #666;padding: 5px 0px;border-radius: 2px;}

change the padding to:

padding: 5px 5px;

This gives a neater look to the form fields when filled in