2

我使用 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>
4

2 回答 2

5

CSSafter伪元素在输入字段上不起作用（https://stackoverflow.com/questions/9840768/css-after-input-does-not-seem-to-work）。不幸的是，您唯一的解决方案是在输入字段上添加三角形作为背景图像，或者用 adiv或 a之类的东西包围该字段span并将after选择器添加到该元素。

至于您的按钮，我建议将其从 input 元素更改为 a button，然后您可以将after选择器应用于该按钮。

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

于 2013-08-28T16:54:36.937 回答
0

  1. 添加 .button 样式position:relative; padding: 0;

  2. 添加 .button-style 输入padding: 0.7em 2em 0.7em 1em;--> 你可以改变这个大小，主要思想是将填充从 .button-style 移动到 .button-style 输入

  3. 为 .button-style:after 添加下一个 CSS 规则

position:absolute; top:50%; right:10%; margin: -0.2em 0 0 0;

于 2013-08-28T17:08:15.763 回答