提问人：bryca 提问时间：11/1/2010 更新时间：7/11/2013 访问量：501
不显眼但可用的跨度按钮？
Unobtrusive, yet usable span buttons?
问：
我想使用 span 标签创建样式化的按钮，这些标签或多或少类似于标签。快速单击按钮不应选择其元素内部或外部的任何文本，或者根本无法选择文本，并且还应该具有指针光标。<button>
在jQuery中为事件分配一个普通的标签可以正常工作，但不能像一个正确的按钮那样起作用。我不知道如何完成此操作，只能使用标签代替，使用或属性的链接。但这几乎违背了不显眼的 JavaScript 的目的。此外，锚链接已经有带下划线的文本和需要覆盖的颜色。<span>.click()<a>#javascript:href
总而言之，我怎样才能完成一个不显眼的跨度按钮？无需依赖锚点或实际的按钮输入标记。谢谢。
答：
1赞
Sarfraz
11/1/2010
#1
更新
您可以使用以下样式来阻止选择：
-webkit-user-select:none;
-moz-user-select:none;
在此处查看演示
请注意，以上内容仅适用于 webkit 和 mozilla 浏览器。
据我了解，jQuery是最容易变得不引人注目的。你可以这样做：
$(function(){
$('#span_id').click(function(){
// your code here...
});
});
请注意，标签是内联元素，您需要将其设置为块级才能应用并使其看起来像一个按钮。<span>display:blockwidthheight
话虽如此，我想知道为什么你不能/不使用按钮来代替并使你的代码在语义上有效。
评论
0赞
bryca
11/14/2010
啊，我看到你对我的榜样的改变。谢谢，但 user-select 仅禁用对其应用到的元素的内部文本的选择。如果单击该按钮并向下拖动，则会选择其他文本。在输入按钮的情况下，不会发生这种情况。
0赞
Brad Mace
11/1/2010
#2
这可能是一个疯狂的想法，但您可以将按钮用作按钮。它们可以像其他所有东西一样进行样式设计。
评论
1赞
bryca
11/1/2010
举个例子，我见过的几乎每个“日期选择器”小部件都使用 span 或 div 作为月份某一天的按钮。我认为使用系统按钮会有点傻。样式按钮还涉及删除/替换默认样式。
0赞
Griknok
7/11/2013
#3
“跨度按钮”
<span class="spanbutton" title="Span Button!" onclick="spanButtonFunction()">Span Button!</span>
造型：
.spanbutton {
color:#000000;
border:1px solid #000000;
padding-left:8;
padding-right:8px;
border-radius:3px;
cursor:pointer;
font-family: arial;
font-size:small;
/*prevent selection*/
-webkit-user-select:none;
-moz-user-select:none;
/* fallback */
background-color:#EEEEEE;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CCCCCC), to(#F4F4F4));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #F4F4F4, #CCCCCC);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #F4F4F4, #CCCCCC);
/* IE 10 */
background: -ms-linear-gradient(top, #F4F4F4, #CCCCCC);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #F4F4F4, #CCCCCC);
}
当然还有按钮功能的脚本。
此外，当您单击按钮时，如果您想对按钮的外观进行“中键”编码，jQuery 将提供帮助：
$(document).ready(function (){
$(".spanbutton").bind("mousedown", function(e){
buttondown(this);
});
$(".spanbutton").bind("mouseup", function(e){
buttonup(this);
});
$(".spanbutton").bind("mouseout", function(e){
buttonup(this);
});
});
function buttondown(button) {
button.className = "downbutton";
}
function buttonup(button) {
button.className = "spanbutton";
}
以及“向下”按钮的更多样式：
.downbutton {
color:#000000;
border:1px solid #333333;
padding-left:8px;
padding-right:8px;
border-radius:3px;
cursor:pointer;
font-family: arial;
font-size:small;
/*prevent selection*/
-webkit-user-select:none;
-moz-user-select:none;
background-color:#BBBBBB;
}
如果您喜欢，请投票！这将激励我做更详细的回应，比如
评论