CS Forms - three styling questions

[xoa]

A few things i cam across so far during my form-building process:

1. Editing the border radius for SELECT fields has no effect.
2. Can we somehow change the padding of the text inside the fields (input, select… every field)
3. Do you have plans for adding country-flags to the phone number field?

[prakash_s]

Hello @xoa,

Thanks for writing to us.

Query 1.

Go to the Select field -> Design ->Border Radius->Set the Border radius from here. Please have a look at the given screenshot below.

Query 2.

Go to the Select field -> Design ->Padding, set the padding here.

Query 3.

We will add your request for country flags in the phone number field to our feature queue for future consideration.

Thanks

[xoa]

@prakash_s
Thanks for getting back to me.

Unfortunately, the border Radius does not change for SELECT fields, no matter what I set. Same for Padding.

[prakash_s]

Hello @xoa,

In order to help you with your concerns, we need to check your settings. I would request please share the admin login details. Meanwhile, I would suggest you troubleshoot a few of the common issues before we investigate your settings. Please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin-level username and password
• Exact page URL

You can find the Secure Note button at the bottom of your posts

Thanks

[ruenel]

Hello @xoa,

The given WP credentials do not work for us. Could you please double-check it?

Thanks.

[xoa]

Sorry, please retry.

[ruenel]

Hey @xoa,

The border setting is for the Select field:

Are you trying to include the dropdown borders as well?

You may need to check this article:

Customizable select elements - Learn web development | MDN

https://www.sitepoint.com/community/t/how-do-i-style-this-drop-down-box/103484/2

Best Regards.

[xoa]

@ruenel What browser are you using?
For me, using Safari, border radius has no effect for SELECT fields.

EDIT: Works with Chrome, but does not work with Safari.

[prakash_s]

Hello @xoa,

I checked your site, and it seems that the select box border radius is not working properly in Safari. I would suggest you please go to the Select box input element ->Customize ->Element CSS.

Add this custom CSS code

$el.cs-input{
-webkit-appearance: none;
appearance: none;
-webkit-border-top-left-radius: 100px;
-webkit-border-top-right-radius: 100px;
-webkit-border-bottom-left-radius: 100px;
-webkit-border-bottom-right-radius: 100px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector. If you have no idea about coding, you can subscribe to One, where customization questions are answered.

Hope it helps.
Thanks