CSS :after used to make arrow for links not working for submit button

Question

我使用 CSS :after 选择器为我的链接创建了一个箭头。这工作正常，但现在我想做同样的事情来形成输入。

如果我在提交按钮上使用相同的类，那么 :after 将被忽略，我假设是因为该元素不能包含其他其他元素。

如果我将该类应用于包含提交按钮的 div，那么它看起来不错，但实际提交按钮之外的箭头和填充不可点击。

有解决办法吗？

http://jsfiddle.net/jn7Vj/5/

.button-style {
    background: -moz-linear-gradient(top, #02AD85, #019975);
    background: -webkit-linear-gradient(top, #02AD85, #019975);
    background: linear-gradient(top, #02AD85, #019975);
    padding: 0.7em;
    border-radius: 0.5em;
    border-bottom: 4px solid #003E30;
    box-shadow: 0 2px 0px #252D42;
    font-size: 15px; //findme
    margin-top: 15px;
    display: inline-block;
    margin-top: 10px; //findme
    border-top: none;
    border-right: none;
    border-left: none;
    color: white;
    font-size: 12px;
}
.button-style:after {
       content: '';
       display: inline-block;
          width: 0px;
       height: 0px;
       border-style: solid;
       border-width: 0.4em 0 0.4em 0.7em;
      border-color: transparent transparent transparent #FFF;
      margin-left: 0.75em;
    }

.button-style input {
       background: none;
    border: none;
    color: white;
    font-size: 12px;
    margin: 0;
    padding: 0;
}


<a href="#" class="button-style">Here is a link</a>

<form class="webform-client-form" enctype="multipart/form-data" action="/cchetwood/4/contact" method="post" id="webform-client-form-4" accept-charset="UTF-8"><div><div class="form-item webform-component webform-component-textfield" id="webform-component-full-name">

<input type="text" id="edit-submitted-preferred-times-to-contact-optional" name="submitted[preferred_times_to_contact_optional]" value="" size="60" maxlength="128" class="form-text">

<input type="submit" class="button-style" value="Submit">

<div class="button-style">
<input type="submit" value="Submit">   
</div>


</form>    

Answer 1

CSS after 伪元素不适用于输入字段 ( https://stackoverflow.com/questions/9840768/css-after-input-does-not-seem-to-work )。不幸的是，您在这里唯一的解决方案是在输入字段上添加三 Angular 形作为背景图像，或者用 div 或 span 之类的东西围绕该字段并添加 在该元素的选择器之后。

至于你的按钮，我建议将它从输入元素更改为 button，然后你可以将 after 选择器应用于它。

编辑
再次阅读您的问题后，我不确定您是否要将三 Angular 形添加到文本输入中，但这里有一个 jsFiddle，其样式仅添加到按钮:http://jsfiddle.net/jn7Vj/9/