我用span 标签做成了 按钮的样式,如下图中的开始和停止 按钮,每次鼠标滑过,选中按钮种的文字时总会使文字出现蓝色背景,如下图。请问如何设置标签的Css样式,可以避免这种情况的出现?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>抽奖系统</title>
<link rel="stylesheet" type="text/css" href="choujiang.css">
<script type="text/javascript" src='choujiang.js'></script>
</head>
<body>
<div>
<div id='title'>抽奖开始</div>
<div class='action'>
<span id='start' class='btn'>开始</span>
<span id='stop' class='btn'>停止</span>
</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------
*{
margin: 0;
padding: 0;
}
#title{
font-size: 30px;
text-align: center;
color: red;
font-family: '微软雅黑';
margin-top: 20px;
}
.btn{
display: block;
font-size: 20px;
font-family: 'microsoft yahei';
width: 80px;
float:left;
border:1px solid #aaa;
text-align: center;
border-radius: 10px;
background-color: #ff00ff;
color: #fff;
cursor: pointer;
}
#start{
margin-right:30px;
}
.action{
width:194px;
height: 30px;
margin: 40px auto;
}
问题已经,解决了,谢谢各位朋友的帮助
解决方案:
/*设置文字不能被选中 以下为css样式*/
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
贴代码上来大家看看
改成button试试
定义 display:block; 块级元素了吗? 最好有附上 你的代码