Instead of adding to the current selection when any area of a record in the table is selected, provide a check box on the left side of each row in the table. Features are selected by clicking the check box, and unselected by clearing the check box (or the 'clear all' menu option)
<p>
<input type="checkbox" id="test1" />
<label for="test1">Red</label>
</p>
<p>
<input type="checkbox" id="test2" checked="checked" />
<label for="test2">Yellow</label>
</p>
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
padding-left: 25px;
cursor: pointer;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left:0; top: 2px;
width: 17px; height: 17px;
border: 1px solid #777;
background: #f8f8f8;
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
content: 'โ';
position: absolute;
top: 0; left: 4px;
font-size: 14px;
color: #09ad7e;
transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
[type="checkbox"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
/* hover style just for information */
label:hover:before {
border: 1px solid #4778d9!important;
}
/* Useless styles, just for demo design */
body {
font-family: "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif;
color: #777;
}
h1, h2 {
margin-bottom: 5px;
font-weight: normal;
text-align: center;
}
h2 {
margin: 5px 0 2em;
color: #aaa;
}
form {
width: 80px;
margin: 0 auto;
}
.txtcenter {
margin-top: 4em;
font-size: .9em;
text-align: center;
color: #aaa;
}
.copy {
margin-top: 2em;
}
.copy a {
text-decoration: none;
color: #4778d9;
}```