CSS:用于为不适用于提交按钮的链接制作箭头

Question

香港专业教育学院使用CSS:选择器为我的链接创建一个箭头.这很好但现在我想做同样的事情来形成输入.

如果我在提交按钮上使用相同的类,则忽略: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伪元素不适用于输入字段(/sf/ask/688853791/).不幸的是,这里唯一的解决方案是在输入字段上添加三角形作为背景图像,或者使用类似a div或a的东西包围字段,span并将after选择器添加到该元素.

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

编辑
再次阅读你的问题后,我不确定你是否想在你的文本输入中添加三角形,但这里是一个jsFiddle,其风格仅添加到按钮:http://jsfiddle.net/jn7Vj/9/