javascript - 如何减少文本周围出现蓝框的次数？

Question

我刚刚创建了允许用户与文本交互的工作代码，当文本；这会打开一个模态框，在其中单击文本并变为红色。文本变红表示复选框被选中。

但是，每次我与文本交互时，这个蓝色框都会频繁地包围它。当我单击文本并再次单击它时，会出现蓝色框。

我试过输入

input:focus{
    outline: none;   
}

但是蓝框问题还是反复出现。

$('a[href="#ex5"]').click(function(event) {
  event.preventDefault();
  $(this).modal({
    escapeClose: false,
    clickClose: false,
    showClose: false,
  });
});

.onlyThese {
  cursor: pointer;
}

input[type="checkbox"] {
  display: none
}

input[type="checkbox"]:checked+label {
  color: red
}

input:focus {
  outline: none;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

<p><a class="btn" href="#ex5">Sectors </a></p>
<div id="ex5" ; class="modal" ; style="background-color:white">
  <div style="float:left;">
    <input type="checkbox" id="group1">
    <label for="group1" class="onlyThese">Publication </label>
  </div>
  <div>
    <p style="float:right">
      <a href="#" rel="modal:close" ; class="onlyThese;"> <b>Apply</b> </a>
    </p>
  </div>
</div>

我希望蓝框完全不出现，或者降低它出现的频率。我正在使用谷歌浏览器。

Answer 1

试试这个:

.onlyThese{
cursor:pointer;
-webkit-user-select: none;  
-moz-user-select: none;     
-ms-user-select: none;      
 user-select: none;
 }