How to modify the border style of WPCF7？ - Support | Kriesi.at

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
April 5, 2022 at 5:46 am #1347211

zemanchiu
Participant

Hi TEAM
I have a WPCF7 form, and I want to change the 3 input boxes to a style with only one line below.
And i try to add below code in css
`input.wpcf7-form-control.wpcf7-text.wpcf7-validates-ad-required{
border:none;
border-bottom: 1px solid #000}`
but is don’t work.

April 5, 2022 at 10:58 am #1347238
Rikard
Keymaster
Hey zemanchiu,

Please try this CSS instead:
```
.wpcf7-form-control-wrap.product-name, .wpcf7-form-control-wrap.MANUFACTURER, .wpcf7-form-control-wrap.QUANTITY {
    border: none;
    border-bottom: 1px solid #000;
}
```
Best regards,
Rikard
April 5, 2022 at 11:04 am #1347242

zemanchiu
Participant

Hi Rikard
It is didn‘t work.
Is it directly added to the Quick CSS column?

April 5, 2022 at 11:32 am #1347255
Rikard
Keymaster
Hi,

Please try this CSS instead:
```
.wpcf7-form-control-wrap.product-name input, .wpcf7-form-control-wrap.MANUFACTURER input, .wpcf7-form-control-wrap.QUANTITY input {
    border: none;
    border-bottom: 1px solid #000;
}
```
Best regards,
Rikard
April 5, 2022 at 11:36 am #1347257

zemanchiu
Participant

Hi Rikard
Thanks for your help, but this code still doesn’t work….

April 5, 2022 at 12:37 pm #1347265
Rikard
Keymaster
Hi,

Try this instead:
```
.wpcf7-form-control-wrap.product-name input, .wpcf7-form-control-wrap.MANUFACTURER input, .wpcf7-form-control-wrap.QUANTITY input {
    border: none !important;
    border-bottom: 1px solid #000 !important;
}
```
Best regards,
Rikard
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.