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 回答