Question

如果有新消息，我正在尝试为消息系统创建一个按钮以显示橙色点。但是，我无法让它发挥作用。有可能吗？

这是按钮

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

如果有人想尝试的话，jsFiddle上的按钮： - ）

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

Answer 1

改为使用button元素。

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

当然，不要在线添加你的样式。我只是为了这个例子而做的。

您还可以向button添加一个类，例如new-messages，然后执行...

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

请记住，后者不适用于较旧的IE。

Answer 2

使用<button>代替<input>，因为它有可以设置样式的子元素。

Answer 3

要在按钮上添加橙色圆点，我建议您使用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/

Answer 4

根据问题标题，以下内容将有助于在单个样式标签中添加多种样式

<button type="button" style= "margin-top : 20px; border-radius: 15px" 
class="btn btn-primary">View Full Profile
</button>

html按钮上的多个CSS样式

4 个答案: