如何从联系表格7表格中删除顶部，右侧和左侧边框？

Question

我有一个问题，不知道如何解决。我有联系表格7表格，如下所示：

并希望从字段中删除顶部，左侧和右侧边框，因此将如下所示：

所以我的问题是需要做些什么改变才能看到它？我在Google上搜索过，Stackoverflow也回答了问题，但没有发现像我这样的问题。这是控制该部分的代码：

.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

尝试：

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

除了底部之外，这将删除边框。

Answer 2

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

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

Answer 3

如果您能够重写此样式，更好的方法是仅定义底部边框，如下所示：

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>