éléments pseudo sur entrée.soumettre

J'ai suivi de très près quelques techniques pour faire un peu de CSS triangles avec des pseudo-éléments.

J'ai appliqué avec succès pour les titres (et les liens - voir ici; http://culturecuts.co.uk), mais alors quand j'ai essayé de faire la même chose à un formulaire d'inscription, je ne peux pas obtenir les triangles?

À droite au bas de la même lien, vous pourrez voir mon formulaire d'inscription et, pas de triangles! Été de me gratter la tête pendant des heures maintenant!

HTML ressemble à ceci: 

<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 comme ceci:

    #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;
}
double possible de CSS :après le pseudo-élément sur le champ de SAISIE
Passé à la longue sur la même question tout à l'heure en pensant qu'il doit être quelque chose de mal avec mon code.

OriginalL'auteur Infocentre | 2011-12-22

  1. 6

    Vous pouvez voir pourquoi cela ne fonctionne pas par la lecture de la liés à "double":

    Puis-je utiliser l' :après le pseudo-élément sur un champ de saisie?

    Cependant, dans votre cas, il existe une solution de contournement:

    Changement:

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

    :

    <button type="submit">Subscribe</button>
    Il y aurait un travail autour si j'avais le contrôle sur la sortie html! Le formulaire est exécuté par le Formulaire de Contact 7 sur WP... la poisse!
    <button> est donc beaucoup plus souple que <input>, c'est trop mauvais, ils ont fait ce choix. Vous devez modifier le code HTML ou javascript.
    vous pouvez modifier les plugins, assurez-vous de les enregistrer sous un autre nom de dossier/pour éviter d'être écrasé par des mises à jour et d'envisager les implications du droit d'auteur. - des retours le changement pour le plugin propriétaire en tant que recommandation pour eux
    OK, cool - eh bien merci pour identifier le problème!

    OriginalL'auteur Wesley Murch