CODEWITHSUNDEEP
htmlcsswordpresscontact-form-7
DrMTR
DrMTR

Reputation: 509

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 ?

Upvotes: 1

Views: 4277

Answers (3)

piuspbd
piuspbd

Reputation: 1101

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.

Upvotes: 2

P.S.
P.S.

Reputation: 16384

If you able to rewrite this styles, the better way is to define only bottom border, like this:

div {
  width: 100px;
  height: 100px;
  background-color: violet;
  border-bottom: 5px black solid;
}
<div></div>

If not, you need to remove unnecessary borders (top, left and right). You can do it like this:

border-top: none; 
border-left: none;
border-right: none;

Or if it will not work, you have to add !important flag to that rules:

border-top: none !important; 
border-left: none !important;
border-right: none !important;

Small demonstration:

div {
  width: 100px;
  height: 100px;
  background-color: violet;
  border: 5px black solid;
  border-top: none; 
  border-left: none;
  border-right: none;
}
<div></div>

Upvotes: 1

Michael McLaughlin
Michael McLaughlin

Reputation: 605

You can control each dimension of the box model independently.

border-right-width: 0px;
border-top-width: 0px;
border-left-width: 0px;

Upvotes: 1

Related Questions