Pseudoelemente bei input.submit

Question

Ich habe einige Techniken zur Erstellung kleiner CSS-Dreiecke mit Pseudoelementen genau verfolgt.

Ich habe diese erfolgreich auf Titel (und Links - siehe hier; http://culturecuts.co.uk ), aber als ich dann versucht habe, das Gleiche mit einem Anmeldeformular zu machen, kann ich die Dreiecke nicht darstellen lassen?

Ganz unten auf demselben Link sehen Sie mein Anmeldeformular, und zwar ohne Dreiecke! Ich kratze mir jetzt schon seit Stunden den Kopf!

HTML sieht folgendermaßen aus:

<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 wie hier:

#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

Warum das nicht funktioniert, können Sie in dem verlinkten "möglichen Duplikat" nachlesen:

Kann ich das Pseudo-Element :after für ein Eingabefeld verwenden?

In Ihrem Fall gibt es jedoch eine Abhilfe:

Ändern:

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

An:

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