1

新しいメッセージがある場合にオレンジ色のドットを表示するメッセージシステムのボタンを作成しようとしています。しかし、私はそれを完全に機能させることができません。出来ますか？

これがボタンです

<input type="button" value="Messages &bull;" />​

そして、誰かが試してみたいと思ったら、jsFiddleのボタン:-)

http://jsfiddle.net/ePA47/1/

4

4 に答える 4

5

button代わりに要素を使用してください。

<button type="button">
   Messages <span style="color: orange;">&bull;</span>
</button>

もちろん、スタイリングをインラインで追加しないでください。私はこの例のためにやっただけです。

buttonなどにクラスを追加してから実行することもできnew-messagesます...

button.new-messages:after {
    content: "•";
    color: orange;
}

後者は古いIEでは機能しないことに注意してください。

于 2012-08-13T10:19:23.690 に答える
0

スタイルを設定できる子要素があるため、<button>代わりに使用します。<input>

于 2012-08-13T10:19:23.597 に答える
0

ボタンにオレンジ色のドットを追加するには、background-image. これにより、ドットを好きなようにデザインでき、フォントの種類に制約されなくなります。

コンテンツではないため、オレンジ色のドットを背景画像として追加すると、アクセシビリティにも優れています。

<input type="button" value="Messages" class="newmessage" />​​​​​​

​.newmessage
{
    background-image:url('http://img859.imageshack.us/img859/9611/orangedot.jpg');
        background-repeat:no-repeat;
    background-position:right center;
    padding:5px;
    padding-right:25px;
}

デモを見る: http://jsfiddle.net/ePA47/3/ </p>

于 2012-08-13T10:23:06.870 に答える
0

質問の見出しによると、以下は単一のスタイルタグに複数のスタイルを追加するのに役立ちます

<button type="button" style= "margin-top : 20px; border-radius: 15px" 
class="btn btn-primary">View Full Profile
</button>
于 2020-10-19T17:30:18.270 に答える