Question

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

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

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

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" />

像这样的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>

input.submit上的伪元素

1 个答案: