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

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

Can I use the :after pseudo-element on an input field?

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

变化：

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

收件人：

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