如何从 Contact Form 7 表单中删除顶部、右侧和左侧边框？

Question

我有一个问题不知道如何解决。我有 Contact Form 7 表格，看起来像这样：

并希望从字段中删除顶部、左侧和右侧的边框，因此看起来像这样：

所以我的问题是需要做哪些更改才能获得这种外观？我搜索了 Google 并且 Whosebug 也回答了问题，但没有找到像我这样更接近的问题。这是控制该部分的代码：

.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;
    }

有什么帮助吗？

Answer 1

您可以独立控制盒子模型的每个维度。

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

Answer 2

如果你能重写这个样式，更好的方法是只定义底部边框，像这样：

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

<div></div>

如果没有，您需要删除不必要的边框（顶部、左侧和右侧）。你可以这样做：

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

或者如果它不起作用，您必须在该规则中添加 !important 标志：

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

小示范：

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

<div></div>

Answer 3

尝试：

.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;
    }

这将删除除底部以外的边框。

如何从 Contact Form 7 表单中删除顶部、右侧和左侧边框？

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

html

css

wordpress

contact-form-7