Html 表单中的CSS继承问题

我在这里有3个CSS类：

.mail-collector {
  display: flex;
  flex-direction: row;
}

.mail-collector input {
  border: solid 3px white;
  color: white;
  background-color: rgba(255, 116, 97, 0);
  font-family: 'Lato';
  font-size: 14;
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 6px 28px;
  }

.send {
  border: solid 3px red;
}

当我在表单上应用它们时，我没有成功地将最后一个元素交给submit元素（send）。我怎样才能继续

<div class="mail-collector">
<%= form_for Subscriber.create, html: {class: "mail-collector"} do |f| %>
        <%= f.text_field :email, placeholder: "email address" %>
        <%= f.submit "send", class: "send" %>
      <% end %>
    </div>

试着在你的

中使用。发送

类使用它如下：

.send {
 border: solid 3px red !important;
}

尝试在你的

中使用。发送
类使用它，如下所示：

.send {
 border: solid 3px red !important;
}

尝试使用
！重要信息
在中。发送类请尝试使用
！发送类中的重要信息