pseudo elements on input.submit

Question

I have followed quite closely some techniques for making little CSS triangles with pseudo elements.

I applied these successfully to titles (and links - view here; http://culturecuts.co.uk), but when i then tried to do the same to a sign-up form, I can't get the triangles to render?

Right at the bottom of the same link you will see my sign-up form and, no triangles! Been scratching my head for hours now!

HTML looks like this:

<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 like this:

#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;
}

possible duplicate of [CSS :after pseudo element on INPUT field](http://stackoverflow.com/questions/2587669/css-after-pseudo-element-on-input-field) — Wesley Murch, Dec 22 '11 at 13:20
Spent to long on the same issue earlier thinking it must be somthing wrong with my code. — John Magnolia, Mar 27 '13 at 10:50

score 7 · Accepted Answer · edited May 23 '17 at 10:32

7

You can see why this won't work by reading the linked "possible duplicate":

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

However, in your case there is a workaround:

Change:

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

To:

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

edited May 23 '17 at 10:32

Community

1
1

answered Dec 22 '11 at 13:22

Wesley Murch

101,186
37
194
228

There would be a work-around if i had control over the html output! The form is run by Contact Form 7 on WP... bummer! – Infocentre Dec 22 '11 at 13:24
` – Wesley Murch Dec 22 '11 at 13:27
you can edit plugins, just make sure you save as a different name/folder to avoid being overwritten by updates and consider the copyright implications. - also feedback the change to the plugin owner as recommendation to them – Dec 22 '11 at 13:27

pseudo elements on input.submit

1 Answers1