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

0

  1. .button-style に追加position:relative; padding: 0;

  2. .button-style 入力用に追加padding: 0.7em 2em 0.7em 1em;--> このサイズを変更できます。主なアイデアは、パディングを .button-style から .button-style 入力に移動することです

  3. .button-style:after の次の css-rules を追加します

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

于 2013-08-28T17:08:15.763 に答える