псевдоэлементы на input.submit - PullRequest
Новая
       20

псевдоэлементы на input.submit

3 голосов
/ 22 декабря 2011

Я довольно тщательно следовал некоторым методам создания маленьких треугольников 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" />

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

1 Ответ

6 голосов
/ 22 декабря 2011

Вы можете понять, почему это не сработает, прочитав связанный «возможный дубликат»:

Можно ли использовать псевдоэлемент: after в поле ввода?

Однако, в вашем случае есть обходной путь:

Изменение: 

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

Кому: 

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