input.submit 上的伪元素

Question

我非常密切地关注一些用伪元素制作 CSS 小三角形的技术。

我成功地将这些应用到标题（和链接 - 在此处查看；http://culturecuts.co.uk），但是当我尝试对注册表单执行相同操作时，我无法渲染三角形？

在同一链接的底部，您将看到我的注册表单，并且没有三角形！我已经挠头好几个小时了！

HTML 看起来像这样：

<p>Name 
  <span class="wpcf7-form-control-wrap your-name">
    <input type="text" name="your-name" value="" class="wpcf7-text wpcf7-validates-as-required name" size="10" />
  </span> Email
  <span class="wpcf7-form-control-wrap your-email">
    <input type="text" name="your-email" value="" class="wpcf7-text wpcf7-validates-as-email wpcf7-validates-as-required email" size="10" />
  </span>
  <input type="submit" value="Subscribe" class="wpcf7-submit submit" />
</p>

CSS 看起来像这样：

#wpcf7-f1967-t1-o1 {
    position: relative;
    display: block;
    background: #FFF;
    padding: 0 0 0 4px;
    line-height: 31px;
}

#wpcf7-f1967-t1-o1 p {
    margin: 0;
    line-height: 31px;
    position: relative;
}

.wpcf7-submit.submit {
    float: right;
    position: relative;
    font-size: 10pt;
    padding: 0 10px;
    background: #1C5357;
    color: #FFF;
    border-style: none;
    border-left: 5px solid #F4F4F4;
    line-height: 31px;
    cursor: pointer;
    font-family: Georgia, "Times New Roman", Times, serif;
    text-transform: uppercase;
    font-size: 8pt;
    -webkit-transition: padding 0.1s linear;
    -moz-transition: padding 0.1s linear;
    -ms-transition: padding 0.1s linear;
    -o-transition: padding 0.1s linear;
}

.wpcf7-submit.submit:hover {
    padding: 0 14px;
    background: #9FB1BF;
}

.wpcf7-submit.submit:before,
.wpcf7-submit.submit:after {
  content: "";
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
}

.wpcf7-submit.submit:before {
    left: -12px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #F4F4F4;
    margin-top: -8px;
}

.wpcf7-submit.submit:after {
    left: -5px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #1C5357;
    margin-top: -6px;
}

.wpcf7-submit.submit:hover:after {
    border-right-color: #9FB1BF;
}

Answer 1

您可以通过阅读链接的“可能的重复”来了解为什么这不起作用：

我可以在输入字段上使用 :after 伪元素吗？

但是，在您的情况下，有一个解决方法：

更改：

<input type="submit" value="Subscribe">

到：

<button type="submit">Subscribe</button>