Search code examples
htmlcsswordpresscontact-form-7

How to remove top, right, and left borders from Contact Form 7 form?

I have one issue that don't know how to resolve. I have Contact Form 7 form, that looks like this:

enter image description here

and want to remove top, left and right borders from fields, so will look like this:

enter image description here

So my question is what changes need to do to get that look ? i searched on Google and also Stackoverflow answered questions but not found closer question like mine. This is code that control that part:

.cf7_custom_style_1 input.wpcf7-form-control.wpcf7-text,
.cf7_custom_style_1 input.wpcf7-form-control.wpcf7-number,
.cf7_custom_style_1 input.wpcf7-form-control.wpcf7-date,
.cf7_custom_style_1 textarea.wpcf7-form-control.wpcf7-textarea,
.cf7_custom_style_1 select.wpcf7-form-control.wpcf7-select,
.cf7_custom_style_1 input.wpcf7-form-control.wpcf7-quiz{
    border-color: #949494;
    border-width: 1px; // Probably something here need to be changed?
    border-style: outset;
    color: #949494;
    font-family: Raleway;
    padding-top: -2px;
    padding-bottom: -2px;
    }

Any help ?

Solution

  • Try:

    .cf7_custom_style_1 input.wpcf7-form-control.wpcf7-text,
.cf7_custom_style_1 input.wpcf7-form-control.wpcf7-number,
.cf7_custom_style_1 input.wpcf7-form-control.wpcf7-date,
.cf7_custom_style_1 textarea.wpcf7-form-control.wpcf7-textarea,
.cf7_custom_style_1 select.wpcf7-form-control.wpcf7-select,
.cf7_custom_style_1 input.wpcf7-form-control.wpcf7-quiz{
    border: none;
    border-bottom-color: #949494;
    border-bottom-width: 1px; // Probably something here need to be changed?
    border-bottom-style: outset;
    color: #949494;
    font-family: Raleway;
    padding-top: -2px;
    padding-bottom: -2px;
    }

    This will remove the border except for the bottom.