change CSS on checkout page specially border

Hi there,

It looks like there was some styling being applied to the selector in the snippet below, which was overriding your styling. Using the following appeared to work and apply your styling to those select fields:

.woocommerce .select2-container .select2-selection--single {
	padding: .6180469716em;
	background-color:;
	color: #43454b;
	outline: 0;
	border: 0;
	-webkit-appearance: none;
	border-radius: 10px;
	box-sizing: border-box;
	font-weight: 400;
	border:solid 1px #cfa748;
}

I hope that helps!

Hi Kellymetal,

Thanks for your reply.

For the 4 select fields it works very good !

But as you can see on my website when we connect for the first time the “country field” is not changing but after choosing a counry it works good .

You can check this by connecting on the following link:

Is any code to add or may i have to add “!important” mention somewhere ?

Thanks in advance.

Hi there!

It looks like the following should work for that country field

.woocommerce-checkout select.country_select {
	padding: .6180469716em;
	background-color:;
	color: #43454b;
	outline: 0;
	border: 0;
	-webkit-appearance: none;
	border-radius: 10px;
	box-sizing: border-box;
	font-weight: 400;
	border:solid 1px #cfa748;
}

Thank you so much Kellymetal all good now it works!

And final with still “country field” can we customize the small arrow/spire on the right of the field to add color like #cfa748 ?

Up please !

Hi there,

So, while those other 4 dropdowns are select2 elements with different parts that are stylable separately, the Country dropdown is a regular select element which makes it a bit more difficult to style it. There are a variety of different workarounds people have found for getting around that, mostly involving hiding the actual dropdown appearance and loading something else like an image.

There are different guides/discussions online for doing this:
https://fabriceleven.com/design/clever-way-to-change-the-drop-down-selector-arrow-icon/
https://codepen.io/vkjgr/pen/VYMeXp
https://stackoverflow.com/questions/22153080/how-do-i-change-the-select-box-arrow/27451020
https://stackoverflow.com/questions/14218307/select-arrow-style-change

For example, something like this will hide the regular appearance on the country select, and then load that icon image:

select.country_select {
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
    background: url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
    background-position-x: 98%;
}

Please read over those guides linked above if you would like to display it a different way.

Hi there,

We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

Kind regards,