I successfully developed code that enables user interaction with text, triggering the opening of a modal box when clicked. In this modal box, the text turns red upon clicking, indicating activation of a checkbox.
However, I notice that every time I interact with the text, a blue box consistently surrounds it. This occurs when I click on the text and then click again.
Even after attempting to input:
input:focus{
outline: none;
}
The issue with the persistent blue box remains unresolved.
$('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>I am looking for a solution to prevent the appearance of the blue box or at least reduce its frequency. My browser of choice is Google Chrome.