问答详情
源自:4-5 [DOM事件] 抽奖系统(下)

选中文字时,如何避免出现蓝色背景

我用span 标签做成了  按钮的样式,如下图中的开始和停止 按钮,每次鼠标滑过,选中按钮种的文字时总会使文字出现蓝色背景,如下图。请问如何设置标签的Css样式,可以避免这种情况的出现?

http://img.mukewang.com/57e0eaf80001109605010163.jpg

<!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;

}


提问者:默默竹 2016-09-20 15:55

个回答

  • 默默竹
    2016-09-21 15:23:39

    问题已经,解决了,谢谢各位朋友的帮助

    解决方案:

    /*设置文字不能被选中     以下为css样式*/

    -webkit-user-select:none;

       -moz-user-select:none;

       -ms-user-select:none;

       user-select:none;


  • 慕粉3835875
    2016-09-21 10:07:58

    贴代码上来大家看看

  • 夜空中最亮de星
    2016-09-21 08:06:02

    改成button试试


  • 夜空中最亮de星
    2016-09-20 19:44:47

    定义 display:block;  块级元素了吗?  最好有附上 你的代码