搜索邮件按钮是如何实现的？

Question

我正在使用Firebug，我只是看到它是一个带有CSS的div，但我不知道他们是怎么做到的？

<div id=":ri" class="J-Zh-I J-J5-Ji L3 J-Zh-I-Js-Zq" tabindex="0" role="button" style="-moz-user-select: none;">Search Mail</div>

我正在尝试制作类似的东西，但我只是一个初学者，我想要按钮的效果，但我不知道他们是怎么做到的？即使我不理解CSS，我只是复制这个但没有效果

.num1 {
-moz-border-radius: 2px 2px 2px 2px;
    background: -moz-linear-gradient(center top , #F5F5F5, #F1F1F1) repeat scroll 0 0 transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #666666;
    cursor: default;
    font: 75% arial,sans-serif;
    margin: 0 8px 0 0;
    outline: medium none;
    padding: 3px 12px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}


.num2{
 display: inline-block;
    position: relative;
}

.num3{
    -moz-border-radius-bottomleft: 0;
    -moz-border-radius-topleft: 0;
    border-left-width: 0;
    margin-left: 0 !important;


}

Answer 1

Gmail使用JavaScript检测click上的div事件。此外，动态添加/删除类以使“按钮”具有正确的样式。

正确设置div元素的样式比尝试为跨浏览器解决方案设置input和button元素样式要容易得多。

Answer 2

这里只是CSSed div：http://jsfiddle.net/bmWGY/1/

如果你想用这个div做点什么，你还需要更多。

Answer 3

这可能是附加了javascript onclick功能的简单div。如果使用jQuery或其他一些框架，可以使用.click()或.bind()（对于jQuery）函数在其他地方定义“action”。请参阅前两个链接中提供的示例以查看此操作。